Obousměrné datové vazby v Angular

V Angular lze zařídit, aby se text zadaný do inputu automaticky dostával do vlastnosti třídy. Toto se nazývá obousměrná datová vazba.

Aby tato vazba fungovala, je nejprve nutné ji aktivovat. Pro tento účel importujeme v souboru komponenty FormsModule:

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

A poté jej přidáme do vlastnosti imports dekorátoru @Component:

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

Poté bude obousměrná datová vazba aktivována a my ji můžeme použít. Pojďme na to.

Nejprve deklarujme vlastnost třídy, kterou poté podrobíme obousměrnému propojení:

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

Předpokládejme, že máme div a input. Nechť se v divu zobrazuje určitá vlastnost třídy:

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

Pojďme navázat naši vlastnost text na změnu inputu. K tomu je třeba do inputu napsat speciální direktivu [(ngModel)], jejíž hodnotou by měla být vlastnost naší třídy:

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

Nyní, pokud spustíte kód a začnete zadávat text do inputu, tento text se okamžitě začne zobrazovat v divu.

Je dán input a odstavec. Do inputu se zadává číslo. Zařiďte, aby se v odstavci zobrazovala druhá mocnina tohoto čísla.

Jsou dány dva inputy a odstavec. Do inputů se zadávají čísla. Zařiďte, aby se v odstavci zobrazoval součet zadaných čísel.