Andmeside kahesuunaline sidumine Angularis

Angularis on võimalik teha nii, et teksti sisestamisel input väljale, see tekst automaatselt läheks klassi omadusse. Seda nimetatakse kahesuunaliseks andmesidemeks.

Selleks, et selline side tööle hakkaks, tuleb see kõigepealt sisse lülitada. Selleks impordime komponendi failis mooduli FormsModule:

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

Ja seejärel lisame selle dekoratiivi @Component omadusse imports:

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

Pärast seda on kahesuunaline andmeside sisse lülitatud ja me saame seda kasutada. Teeme seda.

Alustuseks deklareerime klassi omaduse, mida me hiljem kahesuunaliselt seome:

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

Olgem meil div ja input. Olgu divis kuvatud mingi klassi omadus:

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

Seome oma omaduse text inputi muutumisega. Selleks tuleb inputis kirjutada spetsiaalne direktiiv [(ngModel)], mille väärtuseks tuleb määrata meie klassi omadus:

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

Nüüd, kui käivitada kood ja hakata sisestama teksti inputisse, hakkab see tekst kohe kuvuma divis.

On antud input ja lõik. Inputis kuvatakse number. Tehke nii, et numbri sisestamisel inputi, kuvataks lõigus selle numbri ruut.

On antud kaks inputit ja lõik. Inputitesse sisestatakse numbreid. Tehke nii, et lõigus kuvataks sisestatud numbrite summa.