[Angular]コンポーネント間でデータを受け渡す ～InputとOutput編～

# 新規プロジェクト作成
ng new {プロジェクト名}

# 念のため v9(現時点の最新版) にあげとく
ng update @angular/core @angular/cli

# コンポーネント作成 分かりやすいように親：parentと命名
ng generate component parent

# コンポーネント作成 分かりやすいように子：childと命名
ng generate component child

<app-parent></app-parent>

<p>吾輩が親コンポーネントである。</p>
<app-child></app-child>

<p>私は子コンポーネントです。</p>

ng serve -o

import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';  // 追加
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Input() valueFromParent: string;  // 追加
  constructor() { }

  ngOnInit(): void {
  }
}

<p>
    私は子コンポーネントです。
    親から受け取った値：{{valueFromParent}}
</p>

<p>吾輩が親コンポーネントである。</p>

<div>
  子に渡したい値：
  <input type="text" (keyup)="inputValue($event)">
</div>

<app-child [valueFromParent]="toChildValue"></app-child>

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  public toChildValue: string; // 子へ送る値を格納する変数を用意
  constructor() { }

  ngOnInit(): void {
  }

  inputValue(event: any) { // without type info
    this.toChildValue = event.target.value;
  }
}

<app-child [valueFromParent]="toChildValue"></app-child>

<p>
  吾輩が親コンポーネントである。子から受け取った値：{{fromChildValue}}
</p>

<div>
  子に渡したい値：
  <input type="text" (keyup)="inputValue($event)">
</div>

<app-child [valueFromParent]="toChildValue"
           (event)="onReceiveEventFromChild($event)">
</app-child>

  public fromChildValue: string; // 子から受け取った値を格納する変数を用意

  onReceiveEventFromChild(eventValue: string) {
    this.fromChildValue = eventValue;
  }

<p>
    私は子コンポーネントです。
    親から受け取った値：{{valueFromParent}}
</p>

<!-- ↓追加 -->
<div>
    親に渡したい値：
    <input type="text" (keyup)="inputChildValue($event)">
</div>

import { Component, OnInit } from '@angular/core';
import { Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Input() valueFromParent: string;
  @Output() event = new EventEmitter<string>(); // 追加
  constructor() { }

  ngOnInit(): void {
  }

  // 追加
  inputChildValue(event: any) {
    this.event.emit(event.target.value);
  }

}