Angularda çaga komponente maglumat ýollamak

Maglumatlary ata komponentden çaga komponente ýollap bolýar. Bu maglumatlar çaga klassyň aýratynlyklaryna düşer. Munyň nähili edilýändigine göz aýlalyň.

Başlangyçda, çaga komponentyň klassynda, ata komponentden maglumatlaryň geljek aýratynlyklaryny düzeliň:

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

Indi, bu aýratynlyklara daşardan maglumat geljekdigini yglan etmeli. Bunuň üçin ýörite dekortor Input ulanylýar. Ony çaga komponentimize import edeliň:

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

Indi bolsa bu dekortory aýratynlyklarymyz üçin ulanyň:

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

Çaga komponentyň şablon faýlyna maglumatlary çykarmagy goşalyň:

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

Indi bolsa, atanyň şablonynda, çaga komponentyň tegini çagyrylanda, adlary çaga klassyň aýratynlyklarynyň adlaryna gabat gelýän atributlary ýazalyň. Bu atributlaryň bahalary çaga klassyň aýratynlyklaryna düşer:

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