Angular

Angular @Input デコレーター

2019年2月10日

Angular の @Input デコレーターは、親コンポーネントから子コンポーネントに対してデータを渡す際に使います。

例えば、子コンポーネントとして MyLabel コンポーネントがあるとします。

MyLabel コンポーネント (TypeScript) 

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

@Component({
  selector: 'app-my-label',
  templateUrl: './my-label.component.html',
  styleUrls: ['./my-label.component.css']
})
export class MyLabelComponent {
  constructor() { }
  @Input('text') text: string;
}

MyLabel コンポーネント (HTML テンプレート) 

<p>
  my-label works! {{text}}
</p>

コンポーネントに text プロパティを定義し、更に @Input デコレーターを付与しています。外部コンポーネントからは、@Input デコレーターの引数に指定している 'text' というプロパティを利用して値を渡すことができるようになります。※ 引数を省略すると、変数名（ここでは 'text'）というプロパティ名になります。

親コンポーネントからは次のように利用しています。 text というプロパティ(インプット)に対して "abc" という文字列を指定しています。

App コンポーネント（HTML テンプレート） 

<app-my-label text="abc"></app-my-label>

-Angular