角度付き双方向バインディングの詳細な説明

'@angular/core' から Component、OnInit をインポートします。
@成分（{
  セレクタ: 'app-bind'、
  テンプレート: `
    <div>
      <div>名前: {{ name }}}</div>
      <input type="text" style="width: 300px;" nz-input name="名前" [(ngModel)]="名前" autocomplete="オフ">
    </div>
  `
})
BindComponentクラスをエクスポートし、OnInitを実装します。
  名前 = '';
  コンストラクタ() { }
  ngOnInit(): void { }
}

<div>
  <div>内部: {{値}}}</div>
  <input style="width: 300px;" nz-input (input)="onInput(input.value)" #input autocomplete="off">
</div>

'@angular/core' から Component、EventEmitter、Input、OnInit、Output } をインポートします。
@成分（{
  セレクタ: 'app-inner'、
  テンプレート URL: './inner.component.html',
  スタイル URL: ['./inner.component.scss']
})
InnerComponentクラスをエクスポートし、OnInitを実装します。
  // 入力プロパティを設定します @Input() value!: string;
  // 出力イベントを設定します @Output() valueChange: EventEmitter<string> = new EventEmitter();
  コンストラクタ() { }
  ngOnInit(): void { }
  onInput(値: 文字列){
    // 出力イベントをトリガー - 出力データ this.valueChange.emit(value);
  }
}

'@angular/core' から Component、OnInit をインポートします。
@成分（{
  セレクタ: 'app-outer'、
  テンプレート: `
    <div>
      <div>名前: {{ name }}}</div>
      <app-inner [(値)]="名前"></app-inner>
    </div>
  `
})
OuterComponentクラスをエクスポートし、OnInitを実装します。
  名前 = '';
  コンストラクタ() { }
  ngOnInit(): void { }
}