Пренос података у родитељску компоненту у Angular

Могуће је преносити податке из детет компоненте у родитељску. То се обавља емитовањем догађаја користећи специјални објекат EventEmitter и метод emit. Детет компонента ће емитовати догађаје, шаљући заједно са догађајем неке податке, а родитељска компонента ће хватати догађаје, примајући податке из детет компоненте.

Хајде да испробамо у пракси. За ово нам треба да одрадимо низ корака. За почетак у нашу детет компоненту увезимо декоратор @Output и класу EventEmitter:

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

Сада у детет класи направимо својство onData, чија ће вредност бити нови објекат EventEmitter, који садржи стринг:

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

Сада направимо метод send, чији позив ће емитовати догађај onData у родитељску компоненту са задатим текстом:

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

У темплејту детет компоненте направимо дугме, по клику на које ће се позивати метод send:

app/user/user.component.html<button (click)="send()">
  пошаљи податке
</button>

У родитељској компоненти направимо метод onData, који ће се аутоматски позивати, када из детет компоненте буде емитован одговарајући догађај. У параметар методе ће упадати прослеђени подаци:

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

У темплејту родитељске компоненте вежимо за таг детет компоненте догађај:

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