მონაცემთა ორმხრივი მიბმა 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">

ახლა, თუ კოდს გავუშვებთ და დავიწყებთ ტექსტის შეყვანას ინპუტში, ეს ტექსტი მაშინვე დაიწყებს გამოჩენას დივში.

მოცემულია ინპუტი და აბზაცი. ინპუტში გამოისახება რიცხვი. გააკეთეთ ისე, რომ ინპუტში რიცხვის შეყვანისას, აბზაცში გამოისახოს ამ რიცხვის კვადრატი.

მოცემულია ორი ინპუტი და აბზაცი. ინპუტებში შედის რიცხვები. გააკეთეთ ისე, რომ აბზაცში გამოისახოს შეყვანილი რიცხვების ჯამი.