Przekazywanie danych do komponentu nadrzędnego w Angular

Można przekazywać dane z komponentu potomnego do komponentu nadrzędnego. Robi się to poprzez emisję zdarzeń za pomocą specjalnego obiektu EventEmitter i metody emit. Komponent potomny będzie emitować zdarzenia, przekazując razem ze zdarzeniem pewne dane, a komponent nadrzędny będzie łapać zdarzenia, otrzymując dane z komponentu nadrzędnego.

Spróbujmy w praktyce. W tym celu musimy wykonać szereg kroków. Na początek zaimportujmy do naszego komponentu potomnego dekorator @Output i klasę EventEmitter:

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

Teraz w klasie potomnej zróbmy właściwość onData, której wartością będzie nowy obiekt EventEmitter, zawierający ciąg znaków:

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

Teraz zróbmy metodę send, wywołanie której będzie emitować zdarzenie onData do komponentu nadrzędnego z podanym tekstem:

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

W szablonie komponentu potomnego zróbmy przycisk, po kliknięciu którego będzie wywoływana metoda send:

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

W komponencie nadrzędnym zróbmy metodę onData, która będzie automatycznie wywoływana, gdy z komponentu potomnego zostanie wyemitowane odpowiednie zdarzenie. Do parametru metody będą trafiać przekazane dane:

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

W szablonie komponentu nadrzędnego powiążmy z tagem komponentu potomnego zdarzenie:

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