Dubbelriktad databindning i Angular

I Angular kan man göra så att när text skrivs in i en input, så hamnar denna text automatiskt i en klass egenskap. Detta kallas dubbelriktad databindning.

För att denna bindning ska fungera måste den först aktiveras. För att göra detta importerar vi FormsModule i komponentens fil:

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

Och lägger sedan till den i egenskapen imports i dekoratören @Component:

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

Efter detta kommer dubbelriktad databindning att vara aktiverad och vi kan använda den. Låt oss göra det.

Låt oss först deklarera en klasegenskap som vi sedan kommer att utsätta för dubbelriktad bindning:

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

Låt oss säga att vi har en div och en input. Låt i div-en visas en viss klasegenskap:

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

Låt oss binda vår egenskap text till ändringar i input-fältet. För att göra detta behöver vi skriva direktivet [(ngModel)] i input-fältet, vars värde ska vara klasegenskapen:

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

Om man nu startar koden och börjar skriva text i input-fältet, kommer denna text omedelbart att visas i div-en.

Det finns ett input-fält och ett stycke. I input-fältet visas ett nummer. Gör så att när numret skrivs in i input-fältet, visas kvadraten på detta nummer i stycket.

Det finns två input-fält och ett stycke. I input-fälten skrivs nummer in. Gör så att i stycket visas summan av de inmatade numren.