Overføring av data til en underkomponent i Angular

Det er mulig å overføre data fra en foreldrekomponent til en underkomponent. Disse dataene vil komme inn i egenskapene til underklassen. La oss se hvordan dette gjøres.

Først lager vi egenskaper i underkomponentens klasse som dataene fra foreldrekomponenten vil importeres til:

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

Nå må vi erklære at data fra utsiden vil komme inn i disse egenskapene. For å gjøre dette brukes en spesiell dekoratør Input. La oss importere den til vår underkomponent:

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

Og nå bruker vi denne dekoratøren for våre egenskaper:

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

La oss legge til utskrift av data i underkomponentens mal-fil:

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

Og nå i forelderens mal, når vi kaller på underkomponentens tagg, skriver vi attributter som navnene vil samsvare med navnene på våre egenskaper i underklassen. Verdiene av disse attributtene vil komme inn i underklassens egenskaper:

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