В чем разница между типами Data Binding в Angular?

Разница между типами Data Binding в Angular

Data Binding - это механизм связывания данных между компонентом (TypeScript класс) и шаблоном (HTML). Angular поддерживает четыре основных типа data binding, каждый из которых служит своей цели.

Четыре типа Data Binding

1. Интерполяция (Interpolation) - One-way (компонент -> шаблон)

Синтаксис: {{ expression }}

// component.ts
@Component({
  template: `
    <h1>Welcome, {{ userName }}!</h1>
    <p>You have {{ messageCount }} new messages</p>
    <p>{{ getGreeting() }}</p>
  `
})
export class MyComponent {
  userName: string = 'John';
  messageCount: number = 5;
  
  getGreeting(): string {
    return `Hello, ${this.userName}`;
  }
}

Результат в браузере:

<h1>Welcome, John!</h1>
<p>You have 5 new messages</p>
<p>Hello, John</p>

Характеристики интерполяции:

• One-way binding (компонент -> шаблон)
• Данные текут только в одну сторону
• Обновляется при изменении значения в компоненте
• Самый простой способ вывести значение
• Работает только с текстовым выводом

2. Property Binding - One-way (компонент -> шаблон)

Синтаксис: [property]="expression"

// component.ts
@Component({
  template: `
    <img [src]="imageUrl" />
    <button [disabled]="isButtonDisabled">Click me</button>
    <div [ngClass]="{ 'active': isActive }">Content</div>
    <a [href]="url">Link</a>
  `
})
export class MyComponent {
  imageUrl: string = '/images/photo.jpg';
  isButtonDisabled: boolean = false;
  isActive: boolean = true;
  url: string = 'https://example.com';
}

Результат:

<img src="/images/photo.jpg" />
<button>Click me</button>
<div class="active">Content</div>
<a href="https://example.com">Link</a>

Характеристики property binding:

• One-way binding (компонент -> шаблон)
• Устанавливает свойство (property) элемента, не атрибут (attribute)
• Используется для HTML свойств (disabled, href, src, и т.д.)
• Может устанавливать свойства компонентов
• Работает с любыми типами данных

Разница: атрибут vs свойство

// АТРИБУТ (редко используется в Angular)
<button attr.aria-label="Close">X</button>

// СВОЙСТВО (обычно используется)
<button [disabled]="true">Click</button>

3. Event Binding - One-way (шаблон -> компонент)

Синтаксис: (event)="handler($event)"

// component.ts
@Component({
  template: `
    <button (click)="onButtonClick()">Click me</button>
    <input (change)="onInputChange($event)" />
    <input (keyup)="onKeyUp($event)" />
    <form (submit)="onFormSubmit()">
      <input type="text" />
      <button type="submit">Submit</button>
    </form>
  `
})
export class MyComponent {
  onButtonClick(): void {
    console.log('Button clicked');
  }
  
  onInputChange(event: Event): void {
    const value = (event.target as HTMLInputElement).value;
    console.log('Input changed:', value);
  }
  
  onKeyUp(event: KeyboardEvent): void {
    console.log('Key pressed:', event.key);
  }
  
  onFormSubmit(): void {
    console.log('Form submitted');
  }
}

Характеристики event binding:

• One-way binding (шаблон -> компонент)
• Обработчик вызывается при событии
• $event содержит информацию о событии
• Используется для всех событий DOM
• Жизненно важно для интерактивности

4. Two-way Binding - Двусторонний (компонент <-> шаблон)

Синтаксис: [(ngModel)]="expression"

// component.ts
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-my',
  template: `
    <input [(ngModel)]="userName" />
    <p>Hello, {{ userName }}!</p>
    
    <input type="checkbox" [(ngModel)]="isAgreed" />
    <span>{{ isAgreed ? 'Agreed' : 'Not agreed' }}</span>
    
    <select [(ngModel)]="selectedCity">
      <option value="Moscow">Moscow</option>
      <option value="SPB">SPB</option>
      <option value="Kazan">Kazan</option>
    </select>
    <p>Selected: {{ selectedCity }}</p>
  `,
  imports: [FormsModule] // обязательно!
})
export class MyComponent {
  userName: string = '';
  isAgreed: boolean = false;
  selectedCity: string = 'Moscow';
}

Как это работает:

Пользователь вводит текст в input
        |
        v
     ngModel обновляет свойство userName в компоненте
        |
        v
Компонент обновляет данные
        |
        v
Шаблон обновляется и показывает новые данные

Характеристики two-way binding:

• Two-way binding (компонент <-> шаблон)
• Данные синхронизируются в обе стороны
• Используется для форм и ввода
• Требует FormsModule
• Синтаксис: [(ngModel)]="property"
• На самом деле это комбинация [ngModel] и (ngModelChange)

Эквивалент без ngModel:

// Это то же самое, что [(ngModel)]="userName"
<input 
  [ngModel]="userName"
  (ngModelChange)="userName = $event"
/>

Таблица всех типов

Практический пример: Форма с разными типами binding

// component.ts
@Component({
  selector: 'app-form',
  template: `
    <div>
      <!-- Интерполяция: вывод данных -->
      <h2>{{ formTitle }}</h2>
      
      <!-- Property binding: отключение кнопки -->
      <button [disabled]="!isFormValid">Submit</button>
      
      <!-- Event binding: обработка событий -->
      <form (submit)="onSubmit()">
        
        <!-- Two-way binding: синхронизация данных в форме -->
        <input 
          [(ngModel)]="user.name"
          name="name"
          placeholder="Name"
        />
        
        <input 
          [(ngModel)]="user.email"
          name="email"
          placeholder="Email"
        />
        
        <!-- Two-way binding для textarea -->
        <textarea 
          [(ngModel)]="user.message"
          name="message"
          placeholder="Message"
        ></textarea>
        
        <!-- Two-way binding для checkbox -->
        <label>
          <input 
            type="checkbox"
            [(ngModel)]="user.newsletter"
            name="newsletter"
          />
          Subscribe to newsletter
        </label>
        
        <!-- Property binding для класса -->
        <div [ngClass]="{ 'error': hasError, 'success': hasSuccess }">
          {{ statusMessage }}
        </div>
        
        <button type="submit">Submit</button>
      </form>
    </div>
  `,
  imports: [FormsModule, NgClass]
})
export class FormComponent {
  formTitle: string = 'User Registration';
  statusMessage: string = '';
  hasError: boolean = false;
  hasSuccess: boolean = false;
  
  user = {
    name: '',
    email: '',
    message: '',
    newsletter: false
  };
  
  get isFormValid(): boolean {
    return this.user.name.length > 0 && this.user.email.includes('@');
  }
  
  onSubmit(): void {
    if (!this.isFormValid) {
      this.hasError = true;
      this.statusMessage = 'Please fill all fields correctly';
      return;
    }
    
    console.log('Form submitted:', this.user);
    this.hasError = false;
    this.hasSuccess = true;
    this.statusMessage = 'Success!';
  }
}

Порядок связывания в Angular

Когда в компоненте изменяется свойство, Angular следует такому порядку:

1. Компонент изменяет данные

   this.userName = 'Alice';
   

2. Property binding обновляет шаблон

   <p>{{ userName }}</p> <!-- Становится 'Alice' -->
   

3. Event binding ждёт пользовательского события

   <button (click)="onClick()">Click</button>
   

4. Two-way binding синхронизирует оба направления

   <input [(ngModel)]="userName" /> <!-- Сразу обновляется и в компоненте, и в шаблоне -->
   

Важные различия

Интерполяция vs Property Binding

// ИНТЕРПОЛЯЦИЯ - для текста
<h1>{{ title }}</h1>

// PROPERTY BINDING - для свойств и атрибутов
<img [src]="imageUrl" />
<button [disabled]="isDisabled">Click</button>

// Интерполяция тоже работает с атрибутами, но медленнее
<img src="{{ imageUrl }}" /> <!-- работает, но менее эффективно -->

Event Binding

// КЛИК
<button (click)="onSubmit()">Submit</button>

// ИЗМЕНЕНИЕ
<input (change)="onValueChange($event)" />

// ВВОД
<input (input)="onInput($event)" />

// ОТПРАВКА ФОРМЫ
<form (submit)="onSubmit()">...</form>

// БЛЮР (фокус уходит)
<input (blur)="onBlur()" />

// ФОКУС
<input (focus)="onFocus()" />

Performance: Когда что использовать

// БЫСТРО: property binding
<div [title]="tooltip"></div>

// МЕДЛЕННЕЕ: интерполяция (выполняется в цикле change detection)
<div title="{{ tooltip }}"></div>

// ОПТИМАЛЬНО: используй property binding где возможно

Вывод

В Angular есть 4 типа data binding:

1. Интерполяция {{ }} - вывод данных в текст
2. Property Binding [prop]="" - установка свойств элементов
3. Event Binding (event)="" - обработка событий
4. Two-way Binding [(ngModel)]="" - синхронизация в обе стороны для форм

Выбирай правильный тип в зависимости от задачи, и твой Angular код будет чище и производительнее!