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