Двусторонняя привязка

Двусторонняя привязка — это краткий способ одновременно привязать значение к элементу и предоставить этому элементу возможность передавать изменения обратно через эту привязку.

Синтаксис

Синтаксис двусторонней привязки сочетает квадратные скобки и круглые скобки, [()]. Он объединяет синтаксис привязки к свойству, [], и синтаксис привязки к событию, (). Сообщество Angular неофициально называет этот синтаксис «бананом в коробке».

Двусторонняя привязка с элементами управления формы

Разработчики часто используют двустороннюю привязку, чтобы синхронизировать данные компонента с элементом управления формы, пока пользователь взаимодействует с ним. Например, при заполнении текстового поля пользователем должно обновляться состояние компонента.

В следующем примере динамически обновляется атрибут firstName на странице:

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

@Component({
  imports: [FormsModule],
  template: `
    <main>
      <h2>Hello {{ firstName }}!</h2>
      <input type="text" [(ngModel)]="firstName" />
    </main>
  `,
})
export class App {
  firstName = 'Ada';
}

Чтобы использовать двустороннюю привязку с нативными элементами управления формы, необходимо:

1. Импортировать FormsModule из @angular/forms
2. Использовать директиву ngModel с синтаксисом двусторонней привязки (например, [(ngModel)])
3. Присвоить ей состояние, которое требуется обновлять (например, firstName)

После настройки Angular обеспечит корректное отражение всех изменений в текстовом поле в состоянии компонента!

Подробнее о NgModel читайте в официальной документации.

Двусторонняя привязка между компонентами

Для двусторонней привязки между родительским и дочерним компонентами требуется больше настроек, чем для элементов формы.

В этом примере App отвечает за установку начального состояния счётчика, а логика обновления и отображения интерфейса счётчика в основном находится в дочернем компоненте Counter.

import {Component} from '@angular/core';
import {Counter} from './counter';

@Component({
  selector: 'app-root',
  imports: [Counter],
  template: `
    <main>
      <h1>Counter: {{ initialCount }}</h1>
      <app-counter [(count)]="initialCount"></app-counter>
    </main>
  `,
})
export class App {
  initialCount = 18;
}

import {Component, model} from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="updateCount(-1)">-</button>
    <span>{{ count() }}</span>
    <button (click)="updateCount(+1)">+</button>
  `,
})
export class Counter {
  count = model<number>(0);

  updateCount(amount: number): void {
    this.count.update((currentCount) => currentCount + amount);
  }
}

Настройка двусторонней привязки между компонентами

Если свести приведённый выше пример к основным элементам, для каждой двусторонней привязки компонентов требуется следующее:

Дочерний компонент должен содержать свойство model.

Вот упрощённый пример:

import {Component, model} from '@angular/core';

@Component({
  /* Omitted for brevity */
})
export class Counter {
  count = model<number>(0);

  updateCount(amount: number): void {
    this.count.update((currentCount) => currentCount + amount);
  }
}

Родительский компонент должен:

1. Заключить имя свойства model в синтаксис двусторонней привязки.
2. Присвоить свойству model значение свойства или сигнала.

Вот упрощённый пример:

import {Component} from '@angular/core';
import {Counter} from './counter';

@Component({
  selector: 'app-root',
  imports: [Counter],
  template: `
    <main>
      <app-counter [(count)]="initialCount"></app-counter>
    </main>
  `,
})
export class App {
  initialCount = 18;
}