Տվյալների երկկողմանի կապ Angular-ում

Angular-ում հնարավոր է այնպես անել, որ ինպուտում տեքստ մուտքագրելու ընթացքում, այդ տեքստը ավտոմատ կերպով ընկնի դասի հատկության մեջ: Սա կոչվում է տվյալների երկկողմանի կապ:

Որպեսզի նման կապ աշխատի, նախ անհրաժեշտ է այն միացնել: Դրա համար ֆայլում կոմպոնենտի իմպորտենք FormsModule:

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

Ապա ավելացնենք imports հատկության մեջ @Component դեկորատորի:

@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">

Այժմ, եթե գործարկենք կոդը և սկսենք մուտքագրել տեքստ ինպուտում, այդ տեքստը անմիջապես կսկսի ցուցադրվել դիվում:

Տրված է ինպուտ և պարբերություն: Ինպուտում արտահայտվում է թիվ: Անեք այնպես, որ ինպուտում թիվ մուտքագրելու ընթացքում, պարբերությունում ցուցադրվի այդ թվի քառակուսին:

Տրված են երկու ինպուտ և պարբերություն: Ինպուտներում մուտքագրվում են թվեր: Անեք այնպես, որ պարբերությունում ցուցադրվի մուտքագրված թվերի գումարը: