Двухбаковая прывязка даных у 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">

Цяпер, каб запусціць код і пачаць уводзіць тэкст у інпут, гэты тэкст адразу ж пачне адлюстроўвацца ў дыве.

Дадзены інпут і абзац. У інпут выводзіцца лік. Зрабіце так, каб па меры ўводу ліку ў інпут, у абзацы адлюстроўваўся квадрат гэтага ліку.

Дадзены два інпуты і абзац. У інпуты ўводзяцца лікі. Зрабіце так, каб у абзацы адлюстроўвалася сума ўведзеных лікаў.