Angularда ички компонентга маълумот ўтказиш

Ота компонентдан ички компонентга маълумот ўтказиш мумкин. Бу маълумотлар ички класснинг хусусиятларига түшади. Бу қандай амалга оширилишини кўрамиз.

Бошлаш учун, ички компонент классада ота компонентдан келадиган маълумотлар сақланадиган хусусиятлар яратамиз:

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

Энди бизга бу хусусиятларга ташқаридан маълумот кириб келишини эълон қилиш керак. Бунинг учун махсус Input декоратори ишлатилади. Уни бизнинг ички компонентимизга импорт қиламиз:

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

Энди бу декораторни бизнинг хусусиятларимизга қўллаймиз:

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

Ички компонентнинг шаблон файлида маълумотлар чиқишини қўшамиз:

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

Энди отанинг шаблонида ички компонент тегини чақиришда, номлари ички класснинг хусусиятлари номига мос келадиган атрибутларни ёзамиз. Бу атрибутларнинг қийматлари ички класснинг хусусиятларига түшади:

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