Lidhja e dyanshme e të dhënave në Angular

Në Angular mund të bëhet që, ndërsa futim tekst në input, ky tekst automatikisht të shfaqet në një pronë të klasës. Kjo quhet lidhje e dyanshme e të dhënave.

Që kjo lidhje të funksionojë, së pari duhet të aktivizohet. Për këtë, në skedarin e komponentit importojmë FormsModule:

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

Dhe pastaj e shtojmë në pronën imports të dekoratorit @Component:

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

Pas kësaj, lidhja e dyanshme e të dhënave do të aktivizohet dhe ne mund ta përdorim atë. Le ta bëjmë këtë.

Së pari le të deklarojmë një pronë të klasës, të cilën do ta lidhim më pas në mënyrë të dyanshme:

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

Le të themi se kemi një div dhe një input. Le të themi se në div shfaqet një pronë e caktuar e klasës:

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

Le ta lidhim pronën tonë text me ndryshimet në input. Për këtë, në input duhet të shkruajmë direktivën speciale [(ngModel)], ku vlera e saj duhet të jetë pronë e klasës sonë:

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

Tani, nëse e ekzekutojmë kodin dhe fillojmë të fusim tekst në input, ky tekst menjëherë do të fillojë të shfaqet në div.

Jepet një input dhe një paragraf. Në input shfaqet një numër. Bëni që, ndërsa futet numri në input, në paragraf të shfaqet katrori i këtij numri.

Jepen dy inpute dhe një paragraf. Në inpute futen numra. Bëni që në paragraf të shfaqet shuma e numrave të futur.