Двухбаковая прывязка даных у Angular

У Angular можна зрабіць так, каб па меры ўводу тэксту ў інпут, гэты тэкст аўтаматычна трапляў у ўласцівасць класа. Гэта называецца двухбаковая прывязка даных.

Каб такая прывязка запрацавала, для пачатку яе неабходна ўключыць. Для гэтага ў файле кампанента імпартуем FormsModule:

app/app.component.tsimport { FormsModule } from '@angular/forms';

А затым дадаем у ўласцівасць imports дэкаратара @Component:

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

Пасля гэтага двухбаковая прывязка даных будзе ўключана і мы можам ёй скарыстацца. Давайце зробім гэта.

Для пачатку аб'явім уласцівасць класа, якое мы затым падвергнем двухбаковаму звязванню:

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

Хай у нас ёсць дыў і інпут. Хай у дыве выводзіцца некая ўласцівасць класа:

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

Давайце прывяжам нашу ўласцівасць text да змянення інпута. Для гэтага ў інпуце трэба напісаць спецыяльную дырэктыву [(ngModel)], значэннем якой варта пазначыць ўласцівасць нашага класа:

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

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