Tweerichtingsgegevensbinding in Angular

In Angular kun je ervoor zorgen dat terwijl tekst wordt ingevoerd in een input, deze tekst automatisch in een eigenschap van de klasse terechtkomt. Dit wordt tweerichtingsgegevensbinding genoemd.

Om deze binding te laten werken, moet deze eerst worden ingeschakeld. Importeer hiervoor in het componentbestand de FormsModule:

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

En voeg deze vervolgens toe aan de eigenschap imports van de decorator @Component:

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

Hierna zal tweerichtingsgegevensbinding ingeschakeld zijn en kunnen we deze gebruiken. Laten we dit doen.

Laten we eerst een klasse-eigenschap declareren die we vervolgens aan tweerichtingsbinding zullen onderwerpen:

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

Stel dat we een div en een input hebben. Laat in de div een bepaalde klasse-eigenschap worden weergegeven:

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

Laten we onze eigenschap text binden aan de verandering van de input. Schrijf hiervoor in de input de speciale directive [(ngModel)], waarvan de waarde de eigenschap van onze klasse moet zijn:

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

Als je nu de code start en begint met het invoeren van tekst in de input, zal deze tekst direct worden weergegeven in de div.

Er is een input en een alinea. In de input wordt een getal weergegeven. Zorg ervoor dat terwijl een getal wordt ingevoerd in de input, in de alinea het kwadraat van dit getal wordt weergegeven.

Er zijn twee inputs en een alinea. In de inputs worden getallen ingevoerd. Zorg ervoor dat in de alinea de som van de ingevoerde getallen wordt weergegeven.