Gegevens doorgeven aan de bovenliggende component in Angular

Het is mogelijk om gegevens van een onderliggende component naar een bovenliggende component door te geven. Dit gebeurt door het emitteren van gebeurtenissen met behulp van een speciaal object EventEmitter en de methode emit. De onderliggende component zal gebeurtenissen emitteren en daarbij enkele gegevens meesturen, terwijl de bovenliggende component deze gebeurtenissen opvangt en de gegevens ontvangt.

Laten we dit in de praktijk proberen. Hiervoor moeten we een aantal stappen doorlopen. Om te beginnen importeren we in onze onderliggende component de decorator @Output en de klasse EventEmitter:

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

Nu maken we in de onderliggende klasse een eigenschap onData, waarvan de waarde een nieuw object EventEmitter is, dat een string bevat:

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

Nu maken we een methode send, waarvan de aanroep de gebeurtenis onData zal emitteren naar de bovenliggende component met de opgegeven tekst:

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

In de template van de onderliggende component maken we een knop, waarvan een klik de methode send zal aanroepen:

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

In de bovenliggende component maken we een methode onData, die automatisch wordt aangeroepen wanneer de overeenkomstige gebeurtenis vanuit de onderliggende component wordt geëmitteerd. De doorgegeven gegevens komen in de parameter van de methode terecht:

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

In de template van de bovenliggende component binden we de gebeurtenis aan de tag van de onderliggende component:

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

Maak in de onderliggende component drie knoppen die verschillende gebeurtenissen emitteren. Vang de geëmitteerde gebeurtenissen op in de bovenliggende component.