Detaillierte Erläuterung der Winkel-Zweiwegebindung

importiere { Komponente, OnInit } von '@angular/core';
@Komponente({
  Selektor: ‚App-Bind‘,
  Vorlage: `
    <div>
      <div>Name: {{ name }}</div>
      <input Typ="Text" Stil="Breite: 300px;" nz-input Name="Name" [(ngModel)]="Name" Autovervollständigung="Aus">
    </div>
  `
})
Exportklasse BindComponent implementiert OnInit {
  Name = ";
  Konstruktor() { }
  ngOnInit(): void { }
}

<div>
  <div>inner: {{ Wert }}</div>
  <input style="width: 300px;" nz-input (input)="beiInput(input.value)" #input autocomplete="aus">
</div>

importiere { Komponente, EventEmitter, Eingabe, OnInit, Ausgabe } von '@angular/core';
@Komponente({
  Selektor: ‚app-inner‘,
  Vorlagen-URL: "./inner.component.html",
  styleUrls: ['./inner.component.scss']
})
Exportklasse InnerComponent implementiert OnInit {
  // Eingabeeigenschaften festlegen @Input() value!: string;
  // Ausgabeereignis festlegen @Output() valueChange: EventEmitter<string> = new EventEmitter();
  Konstruktor() { }
  ngOnInit(): void { }
  onInput(Wert: Zeichenfolge){
    // Ausgabeereignis auslösen – Daten ausgeben this.valueChange.emit(value);
  }
}

importiere { Komponente, OnInit } von '@angular/core';
@Komponente({
  Selektor: ‚App-Outer‘,
  Vorlage: `
    <div>
      <div>Name: {{ name }}</div>
      <app-inner [(Wert)]="Name"></app-inner>
    </div>
  `
})
Exportklasse OuterComponent implementiert OnInit {
  Name = ";
  Konstruktor() { }
  ngOnInit(): void { }
}