Tobinding af data i Angular

I Angular kan man gøre sådan, at efterhånden som tekst indtastes i inputfeltet, vil teksten automatisk blive sat i en klasseegenskab. Dette kaldes tobinding af data.

For at få denne binding til at fungere, skal den først aktiveres. For at gøre dette importerer vi FormsModule i komponentfilen:

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

Og tilføjer det derefter til egenskaben 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'
})

Herefter vil tobinding af data være aktiveret, og vi kan bruge den. Lad os gøre det.

Lad os først deklarere en klasseegenskab, som vi derefter vil anvende tobinding på:

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

Lad os sige, at vi har en div og et inputfelt. Lad div'en udskrive en bestemt klasseegenskab:

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

Lad os binde vores egenskab text til ændringer i inputfeltet. For at gøre dette skal vi skrive en speciel direktiv [(ngModel)] i inputfeltet, hvis værdi skal være vores klasseegenskab:

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

Hvis man nu kører koden og begynder at indtaste tekst i inputfeltet, vil teksten straks begynde at blive vist i div'en.