Angular で親コンポーネントから子コンポーネントを操作したい

Angular で親コンポーネントから子コンポーネントのメソッドを叩いたり、子コンポーネントの状態を参照したりしたい時がある。そんなときには、@ViewChild を使うと上手く操作できる。

親コンポーネントの HTML と、子コンポーネントの実装は通常どおり実装する。

<!-- 親コンポーネントの HTML -->

<!-- 子コンポーネントを配置する -->
<app-child-component [someData]="hoge"></app-child-component>

<!-- 子コンポーネントのメソッドを実行するイベント用のボタン -->
<button (click)="execHoge()">子コンポーネント操作</button>

次に、親コンポーネントのプロパティとして以下のように子コンポーネントを書く。

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

/** 親コンポーネント */
@Component( /* ... */)
class ParentComponent {
  /** 子コンポーネントを読み込む */
  @ViewChild(ChildComponent)
  protected childComponent: ChildComponent;
  
  /** 子コンポーネントのメソッドを実行するイベント */
  execHoge() {
    this.childComponent.someChildComponentMethod();
  }
}

このように、子コンポーネントのメソッドを親コンポーネントから任意のタイミングで実行したり、プロパティを参照したりできる。

• 参考 : コンポーネント間のデータ授受メモ - Qiita