Prenos dát do nadradenej komponenty v Angular

Dáta je možné prenášať z podradenej komponenty do nadradenej. To sa robí vyžarovaním udalostí pomocou špeciálneho objektu EventEmitter a metódy emit. Podradená komponenta bude vyžarovať udalosti, pričom spolu s udalosťou prenesie nejaké dáta, a nadradená komponenta bude chytať udalosti, získavajúc dáta z nadradenej komponenty.

Vyskúšajme si to v praxi. Na to potrebujeme urobiť niekoľko krokov. Najprv do našej podradenej komponenty importujeme dekorátor @Output a triedu EventEmitter:

import { Component, Output, EventEmitter } from '@angular/core';

Teraz v podradenej triede vytvoríme vlastnosť onData, ktorej hodnotou bude nový objekt EventEmitter, obsahujúci reťazec:

export class UserComponent {
	@Output()
	public onData = new EventEmitter<string>();
}

Teraz vytvorme metódu send, ktorej volanie bude vyžarovať udalosť onData do nadradenej komponenty so zadaným textom:

export class UserComponent {
	@Output()
	public onData = new EventEmitter<string>();
	
	send() {
		this.onData.emit('xxx');
	}
}

V šablóne podradenej komponenty vytvorme tlačidlo, po kliknutí na ktoré sa bude volať metóda send:

<button (click)="send()">
	send data
</button>

V nadradenej komponente vytvorme metódu onData, ktorá sa bude automaticky volať, keď z podradenej komponenty bude vyžarená príslušná udalosť. Do parametra metódy budú prechádzať prenesené dáta:

export class AppComponent {
	public onData(data: string) {
		console.log(data);
	}
}

V šablóne nadradenej komponenty previažme na tag podradenej komponenty udalosť:

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

V podradenej komponente vytvorte tri tlačidlá, vyžarujúce rôzne udalosti. Zachyťte vyžarené udalosti v nadradenej komponente.