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>