Angularにおける子コンポーネントへのデータ受け渡し

親コンポーネントから子コンポーネントへデータを渡すことができます。このデータは子クラスのプロパティに入力されます。どのように行われるか見てみましょう。

まず、親コンポーネントからのデータがインポートされる子コンポーネントのクラスにプロパティを作成します：

app/user/user.component.tsclass UserComponent {
  public name: string = '';
  public age: number = 0;
}

次に、これらのプロパティに外部からデータが入力されることを宣言する必要があります。これには特別なデコレータInputを使用します。このデコレータを子コンポーネントにインポートしましょう：

app/user/user.component.tsimport { Input } from '@angular/core';

そして、このデコレータをプロパティに適用します：

app/user/user.component.tsclass UserComponent {
  @Input()
  public name: string = '';
  
  @Input()
  public age: number = 0;
}

子コンポーネントのテンプレートファイルにデータ表示を追加します：

app/user/user.component.html<p>{{ name }}</p>
<p>{{ age }}</p>

次に、親のテンプレートで子コンポーネントタグを呼び出す際、属性名を子クラスのプロパティ名と一致させて記述します。これらの属性の値は子クラスのプロパティに入力されます：

app/app.component.html<user-data name="john" age="25"></user-data>