Angular 8で親コンポーネントから子コンポーネントへデータを渡す方法

1. プロパティバインディングを使用する方法:

   • 親コンポーネントのテンプレート内で子コンポーネントのプロパティに値をバインドします。

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

   <app-child [inputData]="parentData"></app-child>

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

   export class ParentComponent {
    parentData: string = "親からのデータ";
   }

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

   export class ChildComponent {
    @Input() inputData: string;
   }

2. イベントエミッターを使用する方法:

   • 子コンポーネント内でイベントエミッターを作成し、親コンポーネントにイベントを発行します。

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

   <app-child (outputEvent)="handleOutputEvent($event)"></app-child>

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

   export class ParentComponent {
    handleOutputEvent(eventData: string) {
      // イベントデータを処理するコード
    }
   }

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

   export class ChildComponent {
    @Output() outputEvent: EventEmitter<string> = new EventEmitter<string>();
    sendDataToParent() {
      const data = "子からのデータ";
      this.outputEvent.emit(data);
    }
   }

これらの方法を使って、親コンポーネントから子コンポーネントへデータを渡すことができます。プロパティバインディングでは、親コンポーネントのデータを子コンポーネントのプロパティにバインドすることでデータを渡します。イベントエミッターでは、子コンポーネントがイベントを発行し、親コンポーネントがそのイベントを受け取ってデータを処理します。