Angular-та екіжақты деректер байланысы

Angular-та енгізу өрісіне мәтін енгізе берген сайын, бұл мәтін сынып қасиетіне автоматты түрде түсетіндік жасауға болады. Бұл екіжақты деректер байланысы деп аталады.

Бұл байланыс жұмыс істеу үшін, алдымен оны қосу керек. Ол үшін компонент файлында FormsModule импорттау керек:

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

Содан кейін @Component декораторының imports қасиетіне қосамыз:

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

Осыдан кейін екіжақты деректер байланысы қосылады және біз оны пайдалана аламыз. Мұны жасап көрейік.

Алдымен, біз екіжақты байланысқа жататын сынып қасиетін жариялайық:

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

Бізде див және енгізу өрісі бар делік. Дивте сыныптың қандай да бір қасиеті шығарылсын:

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

text қасиетімізді енгізу өрісінің өзгеруіне байланыстырайық. Ол үшін енгізу өрісінде арнайы [(ngModel)] директивасын жазу керек, оның мәні ретінде біздің сынып қасиетімізді көрсету керек:

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

Енді, егер кодты іске қосып, енгізу өрісіне мәтін енгізе бастасақ, бұл мәтін дивте бірден көріне бастайды.

Енгізу өрісі және абзац берілген. Енгізу өрісіне сан шығарылады. Енгізу өрісіне сан енгізілген сайын, абзацта сол санның квадраты көрсетілетіндей етіп жасаңыз.

Екі енгізу өрісі және абзац берілген. Енгізу өрістеріне сандар енгізіледі. Абзацта енгізілген сандардың қосындысы көрсетілетіндей етіп жасаңыз.