Transmiterea datelor către un component copil în Angular

Este posibil să transmiți date dintr-un component părinte într-unul copil. Aceste date vor ajunge în proprietățile clasei copil. Să vedem cum se face acest lucru.

Pentru început, vom crea în clasa componentului copil proprietăți în care vor fi importate date din componentul părinte:

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

Acum trebuie să declarăm că în aceste proprietăți vor fi introduse date din exterior. Pentru aceasta se utilizează un decorator special Input. Să îl importăm în componentul nostru copil:

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

Și acum să aplicăm acest decorator pentru proprietățile noastre:

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

Să adăugăm afișarea datelor în fișierul template-ului componentului copil:

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

Iar acum în template-ul părintelui, la apelarea tag-ului componentului copil, vom scrie atribute, ale căror nume vor coincide cu numele proprietăților clasei copil. Valorile acestor atribute vor ajunge în proprietățile clasei copil:

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