Toveisbinding av data i Angular

I Angular kan man gjøre det slik at etter hvert som tekst skrives inn i et inputfelt, vil denne teksten automatisk komme inn i en klasseegenskap. Dette kalles toveisbinding av data.

For at en slik binding skal fungere, må den først aktiveres. For å gjøre dette importerer vi FormsModule i komponentfilen:

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

Og deretter legger vi den til i egenskapen imports i dekoratøren @Component:

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

Etter dette vil toveisbinding av data være aktivert, og vi kan bruke den. La oss gjøre det.

La oss først deklarere en klasseegenskap som vi deretter vil sette under toveisbinding:

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

La oss si at vi har en div og et inputfelt. La oss si at i diven blir en klasseegenskap vist:

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

La oss binde vår egenskap text til endringer i inputfeltet. For å gjøre dette må vi skrive direktivet [(ngModel)] i inputfeltet, og verdien av dette bør være klasseegenskapen vår:

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

Nå, hvis koden kjøres og man begynner å skrive tekst i inputfeltet, vil denne teksten umiddelbart begynne å vises i diven.