Angularda Iki Taraply Maglumat Baglanyşygy

Angularda tekst inputa girizilende, şol tekstiň awtomatik suratda klas hususylygyna düşmegini üpjün etmek mümkin. Bu iki taraply maglumat baglanyşygy diýilýär.

Beýle bir baglanyşyk işlemegi üçin, ilki bilen ony işjeňleşdirmek gerek. Munuň üçin komponent faýlynda FormsModule import edýäris:

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

Soňra bolsa, @Component dekoratorunyň imports hususylygyna goşýarys:

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

Şondan soň iki taraply maglumat baglanyşygy işjeň bolup, ony ulanip bileris. Geliň muny edeliň.

Ilki bilen, iki taraply baglanyşdyryjak klasymyzyň bir hususylygyny yglan edeliň:

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

Bizde bir div we input bardyr diýeliň. Divde bir klas hususylygy görkezilýär diýeliň:

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

Geliň, bizim text hususylygymyzy input üýtgemelerine baglalyň. Munuň üçin inputda ýörite [(ngModel)] direktiwany ýazmaly, onuň bahasy bolsa klasymyzyň hususylygy bolmaly:

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

Indi, kody işledip we inputa tekst girizmäge başlasaňyz, şol tekst derrew divde görkezilip başlar.

Bir input we bir abzas berlen. Inputa bir san girizilýär. Inputa san girizilende, abzada şol sanyň kwadraty görkezilmegini üpjün ediň.

Iki input we bir abzas berlen. Inputlara sanlar girizilýär. Abzada girizilen sanlaryň jemi görkezilmegini üpjün ediň.