Prosleđivanje podataka u roditeljski komponent u Angularu

Podaci se mogu proslediti iz podređenog komponenta u roditeljski. Ovo se postiže emitovanjem događaja pomoću specijalnog objekta EventEmitter i metode emit. Podređeni komponent će emitovati događaje, prosleđujući zajedno sa događajem određene podatke, a roditeljski komponent će hvatali događaje, dobijajući podatke iz podređenog komponenta.

Hajde da probamo u praksi. Za ovo nam je potrebno da odradimo niz koraka. Za početak u naš podređeni komponent importujemo dekorator @Output i klasu EventEmitter:

app/user/user.component.tsimport { Component, Output, EventEmitter } from '@angular/core';

Sada u podređenoj klasi napravićemo svojstvo onData, čija će vrednost biti novi objekat EventEmitter, koji sadrži string:

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
}

Sada napravićemo metod send, čiji poziv će emitovati događaj onData u roditeljski komponent sa zadatim tekstom:

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
  
  send() {
    this.onData.emit('xxx');
  }
}

U templejtu podređenog komponenta napravićemo dugme, na čiji klik će se pozivati metod send:

app/user/user.component.html<button (click)="send()">
  send data
</button>

U roditeljskom komponentu napravićemo metod onData, koji će se automatski pozivati kada iz podređenog komponenta bude emitovan odgovarajući događaj. U parametar metoda će upasti prosleđeni podaci:

app/app.component.tsexport class AppComponent {
  public onData(data: string) {
    console.log(data);
  }
}

U templejtu roditeljskog komponenta povezaćemo na tag podređenog komponenta događaj:

app/app.component.html<app-user (onData)="onData($event)"></app-user>