Angular'da Alt Bileşene Veri Aktarımı

Ebeveyn bileşenden alt bileşene veri aktarabilirsiniz. Bu veriler alt bileşen sınıfının özelliklerine gelecektir. Bunun nasıl yapıldığına bir göz atalım.

Başlangıç olarak, ebeveyn bileşenden verilerin aktarılacağı alt bileşen sınıfında özellikler oluşturalım:

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

Şimdi bu özelliklere dışarıdan veri gireceğini bildirmemiz gerekiyor. Bunun için özel bir dekoratör olan Input kullanılır. Onu alt bileşenimize içe aktaralım:

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

Şimdi bu dekoratörü özelliklerimiz için uygulayalım:

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

Alt bileşenin şablon dosyasına veri çıktısı ekleyelim:

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

Şimdi ebeveynin şablonunda, alt bileşen etiketi çağrılırken, isimleri alt bileşen sınıfımızın özellik isimleriyle eşleşen nitelikler yazalım. Bu niteliklerin değerleri alt bileşen sınıfının özelliklerine aktarılacaktır:

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