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:

import { FormsModule } from '@angular/forms';

Og tilføjer det derefter til egenskaben imports i dekoratøren @Component:

@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å:

export class AppComponent {
	public text: string = '';
}

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

<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:

<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.

Der gives et inputfelt og et afsnit. I inputfeltet vises et tal. Gør sådan, at efterhånden som tallet indtastes i inputfeltet, vises kvadratet af dette tal i afsnittet.

Der gives to inputfelter og et afsnit. I inputfelterne indtastes tal. Gør sådan, at summen af de indtastede tal vises i afsnittet.