Что такое Data Binding в Angular?

Data Binding в Angular представляет собой механизм, который позволяет связывать данные между компонентами и их представлением. Он позволяет автоматически обновлять значения данных в представлении при изменении источника данных и обновлять данные в источнике при вводе или взаимодействии пользователя.

В Angular есть три типа Data Binding:

Interpolation (Интерполяция):
- Интерполяция позволяет вставлять значения свойств компонента непосредственно в шаблон представления с помощью двойных фигурных скобок {{}}.
- Значения свойств компонента будут автоматически обновляться в представлении при изменении источника данных.
- Пример:

import { Component } from '@angular/core'

@Component({
	selector: 'app-my-component',
	template: '<h1>Hello, {{ name }}!</h1>'
})
export class MyComponent {
	name: string = 'John Doe'
}

Property Binding (Привязка свойств):
- Привязка свойств позволяет связывать значения свойств компонента с атрибутами или свойствами HTML-элементов.
- Значение свойства компонента будет присваиваться атрибуту или свойству элемента.
- Изменение значения свойства компонента приведет к автоматическому обновлению атрибута или свойства элемента.
- Пример:

import { Component } from '@angular/core'

@Component({
	selector: 'app-my-component',
	template: '<input [value]="name">'
})
export class MyComponent {
	name: string = 'John Doe'
}

Event Binding (Привязка событий):
- Привязка событий позволяет реагировать на события, происходящие в представлении, и вызывать методы компонента в ответ на эти события.
- Метод компонента будет вызываться при наступлении события, указанного в атрибуте события элемента.
- Пример:

import { Component } from '@angular/core'

@Component({
	selector: 'app-my-component',
	template: '<button (click)="onClick()">Click me!</button>'
})
export class MyComponent {
	onClick() {
		console.log('Button clicked!')
	}
}

Кроме того, в Angular есть еще два типа Data Binding: Two-Way Binding (двусторонняя привязка) и Attribute Binding (привязка атрибутов), которые позволяют связывать данные в обоих направлениях между компонентом и представлением, а также манипулировать атрибутами элементов. Однако, их использование требует дополнительных настроек и директив.

Data Binding в Angular является мощным инструментом, который упрощает разработку и поддержку приложений, позволяя легко управлять данными и их отображением в представлении.