Dwukierunkowe wiązanie danych w Angular

W Angular można sprawić, aby podczas wpisywania tekstu w pole input, ten tekst automatycznie trafiał do właściwości klasy. Nazywa się to dwukierunkowym wiązaniem danych.

Aby takie wiązanie zadziałało, najpierw trzeba je włączyć. W tym celu w pliku komponentu importujemy FormsModule:

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

A następnie dodajemy do właściwości imports dekoratora @Component:

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

Po tym dwukierunkowe wiązanie danych będzie włączone i możemy z niego skorzystać. Zróbmy to.

Na początku zadeklarujmy właściwość klasy, którą następnie poddamy dwukierunkowemu wiązaniu:

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

Załóżmy, że mamy div i input. Niech w divie wyświetla się pewna właściwość klasy:

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

Przywiążmy naszą właściwość text do zmiany w inputcie. W tym celu w inputcie trzeba napisać specjalną dyrektywę [(ngModel)], której wartością należy wskazać właściwość naszej klasy:

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

Teraz, jeśli uruchomimy kod i zaczniemy wpisywać tekst w input, ten tekst natychmiast zacznie wyświetlać się w divie.

Dany jest input i akapit. W inputcie wyświetla się liczba. Spraw, aby podczas wpisywania liczby w input, w akapicie wyświetlał się kwadrat tej liczby.

Dane są dwa inputy i akapit. W inputy wpisywane są liczby. Spraw, aby w akapicie wyświetlała się suma wprowadzonych liczb.