【Angular】親子間での値の受け渡し方法

やろうとしていたこと

多数のページ（コンポーネント）で、チェックボックやドロップダウンを使用するため、コンポーネントとして部品化しました。
そこで課題となるのが親子間のデータの受け渡しです。
この記事では、わかりやすく説明するために文字列を渡す方法について書いています。チェックボックスやドロップダウンの値を渡すにはこの方法を応用してください。

①親⇨子 by @Inputデコレータ

子コンポーネントのクラス

// Inputのインポート
import { Input } from '@angular/core';

// 受け渡し用のプロパティ定義。ここに親から渡された値がセットされる。
@Input()
fromParentToChild: string = '';

子コンポーネントのテンプレート

<span>{{ fromParentToChild }}</span>

親コンポーネントのクラス

親コンポーネントのクラスには特にインポートは必要ありません。
テンプレートに渡したい値をセットするだけです。

parent = 'I am your father.'

親コンポーネントのテンプレート

<app-child [fromParentToChild]="parent"></app-child>

②子⇨親 by @Outputデコレータ

子コンポーネントのクラス

@Outputデコレータではイベントの発火により子から親に対して、通知を行います。

// Outputのインポート
import { Output, EventEmitter } from '@angular/core';

@Output()
event = new EventEmitter<String>();

//チェックボックスをONOFFするとこのメソッドが走る。
onChanged() {
 this.event.emit('チェックボックスが選択されました');
}

子コンポーネントのテンプレート

<input type="checkbox" (change)="onChanged()">
</input>

親コンポーネントのクラス

fromChildData: string = '';

onChangeFromChildData(eventData: String) {
  this.fromChildData = eventData;
}

親コンポーネントのテンプレート

<app-child (event)="onChangeFromChildData($event)"></app-child>
<span>{{ fromChildData }}</span>