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>