Angularda Ikiüzlü Məlumat Bindinqi

Angularda inputa mətn daxil edildikcə, bu mətmin avtomatik olaraq sinif xüsusiyyətinə düşməsini təmin etmək olar. Buna ikiüzlü məlumat bindinqi deyilir.

Belə bir bindinqin işləməsi üçün, əvvəlcə onu aktiv etmək lazımdır. Bunun üçün komponent faylında FormsModule import edirik:

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

Sonra isə @Component dekoratorunun imports xüsusiyyətinə əlavə edirik:

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

Bundan sonra ikiüzlü məlumat bindinqi aktiv olacaq və biz ondan istifadə edə bilərik. Gəlin bunu edək.

Əvvəlcə, sonradan ikiüzlü bindinqə məruz qalacaq sinif xüsusiyyətini elan edək:

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

Tutaq ki, bizim bir div və inputumuz var. Divin içərisində bir sinif xüsusiyyəti çıxış etdirilsin:

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

Gəlin text xüsusiyyətimizi inputun dəyişməsinə bağlayaq. Bunun üçün inputun içərisində xüsusi bir direktiv olan [(ngModel)] yazmaq lazımdır, onun dəyəri kimi isə sinifimizin xüsusiyyətini göstərməliyik:

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

İndi kodu işə salıb inputa mətn daxil etməyə başlasaq, bu mətn dərhal divin içərisində göstərilməyə başlayacaq.

Bir input və bir abzas verilib. Inputa ədəd daxil edilir. Elə edin ki, inputa ədəd daxil edildikcə, abzasda həmin ədədin kvadratı göstərilsin.

Iki input və bir abzas verilib. Inputlara ədədlər daxil edilir. Elə edin ki, abzasda daxil edilən ədədlərin cəmi göstərilsin.