Прослеђивање података у детет-компоненту у 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>