Angular 親コンポーネントから子コンポーネントにデータの渡し方

親コンポーネントから子コンポーネントにデータを渡す方法

親コンポーネントから子コンポーネントにデータを渡す場合、「@Inputデコレーター」を使用し、プロパティに値を設定するします。

子コンポーネントで、「@Input」によりプロパティを作成し、親コンポーネントで、プロパティに値を設定します。

• 子コンポーネント Typescript

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

export class xxxComponent implements OnInit {
  @Input() プロパティ名 : string;
}

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

<app-子コンポーネント [プロパティ名]="設定する値"></app-子コンポーネント>

子コンポーネントから親コンポーネントにデータを渡す場合

「@Outputデコレーター」を使用し、親コンポーネントにイベントを通知し、イベント引数としてデータを渡すイメージとなります。

子コンポーネントで、「@Output」によりイベントを発生させ、親コンポーネントで、イベントおよびイベント引数を受け取ります。

• 子コンポーネント Typescript

import { Output } from '@angular/core';

export class xxxComponent implements OnInit {
  @Output() イベント名(xxEventとつけると分かりやすいです。) = new EventEmitter();

  searchClick(){
    // 単一のデータを渡す場合
    イベント名.emit(設定する値);
    // 例
　　searchEvent(searchedData);

    // 複数のデータを渡す場合
    イベント名.emit({
      戻り値のプロパティ名1:設定する値1,
      戻り値のプロパティ名2:設定する値2,
      戻り値のプロパティ名3:設定する値3,
    })
    // 例
　　searchEvent({
      A1: this.cmbA1.value,
      A2: this.cmbA2.value,
      A3: this.cmbA3.value
    });
  }
}

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

<app-子コンポーネント (イベント名)="イベント処理メソッド($event)"></app-子コンポーネント>

• 親コンポーネント Typescript

イベント処理メソッド(eventArgs){
  // 複数のデータが渡る場合
  let aaa = eventArgs;

  // 複数のデータが渡る場合
  let a1= eventArgs.a1;
  let a2 = eventArgs.a2;
  let a3 = eventArgs.a3;
}

どうでしょうか。これで親子コンポーネントのデータの受け渡しができるかと思います。
よろしければ、「いいね」をお願いします。励みになります。