Gegevens doorgeven aan een child component in Angular

Het is mogelijk om gegevens van een parent component naar een child component door te geven. Deze gegevens zullen terechtkomen in de eigenschappen van de child class. Laten we eens kijken hoe dit wordt gedaan.

Laten we eerst in de class van het child component eigenschappen maken, waarin gegevens vanuit het parent component geïmporteerd zullen worden:

class UserComponent {
	public name: string = '';
	public age: number = 0;
}

Nu moeten we aankondigen dat in deze eigenschappen van buitenaf gegevens zullen worden ontvangen. Hiervoor wordt een speciale decorator gebruikt: Input. Laten we deze importeren in ons child component:

import { Input } from '@angular/core';

En laten we nu deze decorator toepassen op onze eigenschappen:

class UserComponent {
	@Input()
	public name: string = '';
	
	@Input()
	public age: number = 0;
}

Laten we de weergave van gegevens toevoegen in het template bestand van het child component:

<p>{{ name }}</p>
<p>{{ age }}</p>

En nu schrijven we in de template van de parent, bij het aanroepen van de tag van het child component, attributen, waarvan de namen overeenkomen met de namen van onze eigenschappen in de child class. De waarden van deze attributen zullen terechtkomen in de eigenschappen van de child class:

<user-data name="john" age="25"></user-data>