親子関係のコンポーネント間でデータを受け渡す

親子関係のコンポーネントでデータを受け渡す方法についてです。親子ではない場合、こちら（コンポーネント間でデータを共有する）を参照してください。

今回、試してみたディレクトリ、ファイルの構成は以下の通りです。

project
├ node_modules
└ src
    └ app
        ├ app.module.ts
        └ example
            ├ example-parent.component.ts
            └ example-child.component.ts

親子間コンポーネントのデータ受け渡しに関係ないコードは省略しています。

app.module.ts

import { NgModule } from '@angular/core';
import { ExampleParentComponent } from './example/example-parent.component';
import { ExampleChildComponent } from './example/example-child.component';

@NgModule({
  ...
  declarations: [
    ExampleParentComponent,
    ExampleChildComponent
  ],
  ...
})
export class AppModule { }

example-parent.component.ts（親コンポーネント）

import { Component, ViewChild } from '@angular/core';
import { ExampleChildComponent } from './example-child.component'

@Component({
  selector: 'example-parent',
  styles: [``],
  template: `
    <div>
        <example-child [name]="exampleName"></example-child>
    </div>
  `,
})
export class ExampleParentComponent {
  constructor() { }

  @ViewChild(ExampleChildComponent)
  private exampleChild: ExampleChildComponent;

  exampleName = "動作確認";
}

example-child.component.ts（子コンポーネント）

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

@Component({
  selector: 'example-child',
  styles: [``],
  template: `
    <div>{{name}}</div>
  `,
})
export class ExampleChildComponent {
  @Input() name: string;
}

親側のコンポーネントで設定した[name]が子側で参照・設定が可能になります。また、子側で変更されたnameも親側で参照可能ですが、確認したのはハッシュ型だったので上記のようにstring型でできたかどうは不明です。