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:

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

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

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

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

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

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

Det er gitt et inputfelt og et avsnitt. I inputfeltet vises et tall. Gjør slik at etter hvert som tallet skrives inn i inputfeltet, vises kvadratet av dette tallet i avsnittet.

Det er gitt to inputfelt og et avsnitt. I inputfeltene skrives det inn tall. Gjør slik at i avsnittet vises summen av de innskrevne tallene.