Skicka data till en underordnad komponent i Angular

Det är möjligt att skicka data från en förälderkomponent till en underordnad komponent. Dessa data kommer att hamna i egenskaperna i den underordnade klassen. Låt oss se hur detta görs.

Låt oss först skapa egenskaper i den underordnade komponentens klass, där data från förälderkomponenten kommer att importeras:

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

Nu måste vi deklarera att data kommer att skickas in i dessa egenskaper utifrån. För detta används en speciell dekoratör Input. Importera den till vår underordnade komponent:

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

Och låt oss nu applicera denna dekoratör på våra egenskaper:

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

Låt oss lägga till utskrift av data i den underordnade komponentens mallfil:

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

Och nu, i förälderns mall, när vi anropar taggen för den underordnade komponenten, låt oss skriva attribut vars namn kommer att matcha namnen på våra underordnade klasegenskaper. Värdena för dessa attribut kommer att hamna i den underordnade klassens egenskaper:

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