入力プロパティ @Input()

例えば HTML で画像を表す img タグは次のように書きますよね。

<img src="car.png" alt="My Car">

これはつまり、img タグの src 属性や alt 属性を HTML で指定しているということです。

Angular ではコンポーネントのメタデータで、セレクター (selector) を指定することで、 カスタムのタグを作成できるわけですが、HTML から直接値を渡すにはどうしたら良いでしょうか。

これを実現するのが、入力プロパティというものです。@Input 修飾子 (decorator) を使います。

次の例では従業員 (Employee) コンポーネント EmployeeComponent を作成して、lastname (苗字)、firstname (名前)、title (役職) を受け取るようにしましょう。 EmployeeComponent を使う時に次のようにしたいとします。

<employee lastname="Yamada" firstname="Hanako" title="HR"></employee>

これを実現するには次のようにします。

src/app/employee.component.ts に EmployeeComponent を定義します。

import {Component, Input} from '@angular/core';

@Component({
  selector: 'employee',
  templateUrl: './employee.component.html',
  styleUrls: [ './employee.component.css']
})
export class EmployeeComponent{
  @Input() lastname;
  @Input() firstname;
  @Input() title;
}

プロパティに @Input() が付いているところがポイントです。また、@Input を使うために @angular/core からインポートしています。

テンプレート src/app/employee.component.html は次のようにします。

<div class='emp'>
  <div class='emp-name'>{{lastname|uppercase}}, {{firstname}}</div>
  <div class='emp-title'>{{title}}</div>
</div>

lastname は Angular 2 のビルトインパイプのひとつである、 uppercase パイプ (UpperCasePipe) で大文字に変換してます。

CSS src/app/employee.component.css は特に Angular だからといって、特別なことはなく次の通り。

.emp {
  border:1px solid #eee;
  margin-bottom:1em;
  font-family:sans-serif;
}

.emp-name {
  font-weight:bold;
}

.emp-title {
  color:#999;
}

この結果、次のようになります。

またオブジェクトとして一括でデータを渡すには次のようにします。

コンポーネントは次のようにします。

import {Component, Input} from '@angular/core';

@Component({
  selector: 'employee',
  templateUrl: './employee.component.html',
  styleUrls: [ './employee.component.css']
})
export class EmployeeComponent{
  @Input() employee;
}

テンプレートは次の通り。

<div class='emp'>
  <div class='emp-name'>{{employee.lastname|uppercase}}, {{employee.firstname}}</div>
  <div class='emp-title'>{{employee.title}}</div>
</div>

これを使うところでは次のようにオブジェクトを渡すことができます。

<employee [employee]="{firstname:'Ichiro', lastname:'Suzuki', title:'CEO'}"></employee>