Что такое двухсторонняя привязка с ngModel?

Первым делом

[(ngModel)] — синтаксический сахар для двухсторонней привязки: property binding значения плюс событие обновления. Требует FormsModule и обычно относится к template‑driven формам.

<input name="email" [(ngModel)]="email" required />
<p>Вы ввели: {{ email }}</p>

Эквивалент без сахара:

<input [ngModel]="email" (ngModelChange)="email = $event" />

@Component({
  standalone: true,
  imports: [FormsModule],
  template: `...`,
})
export class LoginComponent {
  email = '';
}

Когда выбирать ngModel

• Быстрые формы, прототипы, простые экраны с малым числом полей.
• Для сложных валидаций, динамических полей, кросс‑полевых правил и юнит‑тестов чаще берут Reactive Forms (FormControl / FormGroup).
• В кастомных компонентах two‑way делают парой @Input() value + @Output() valueChange или через model() в современном API.
• Не смешивайте без нужды ngModel и reactive formControlName на одном контроле — получите конфликты.

Помните про name у контролов в template‑driven формах: без имени сложнее связать контрол с родительской формой.

Итог

[(ngModel)] удобен для template‑driven форм. Понимайте сахар [ngModel] + (ngModelChange) и отличие от reactive‑подхода.