Dwukierunkowe wiązanie danych w Angular

W Angular można sprawić, aby podczas wpisywania tekstu w pole input, ten tekst automatycznie trafiał do właściwości klasy. Nazywa się to dwukierunkowym wiązaniem danych.

Aby takie wiązanie zadziałało, najpierw trzeba je włączyć. W tym celu w pliku komponentu importujemy FormsModule:

app/app.component.tsimport { FormsModule } from '@angular/forms';

A następnie dodajemy do właściwości imports dekoratora @Component:

app/app.component.ts@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, UserComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

Po tym dwukierunkowe wiązanie danych będzie włączone i możemy z niego skorzystać. Zróbmy to.

Na początku zadeklarujmy właściwość klasy, którą następnie poddamy dwukierunkowemu wiązaniu:

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

Załóżmy, że mamy div i input. Niech w divie wyświetla się pewna właściwość klasy:

html<div>
  {{ text }}
</div>
<input>

Przywiążmy naszą właściwość text do zmiany w inputcie. W tym celu w inputcie trzeba napisać specjalną dyrektywę [(ngModel)], której wartością należy wskazać właściwość naszej klasy:

html<div>
  {{ text }}
</div>
<input [(ngModel)]="text">

Teraz, jeśli uruchomimy kod i zaczniemy wpisywać tekst w input, ten tekst natychmiast zacznie wyświetlać się w divie.