Angular Data Binding

Table of contents

1. From the Component to the DOM
   1. 1. Interpolation
   2. 2. Property binding
2. From the DOM to the Component
   1. 3. Event binding
   2. 4. Two-way data binding
3. For more information

---

Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data.

---

From the Component to the DOM

1. Interpolation

: Adds the value of a property from the component

<li>Name: </li>
<li>Address: </li>

2. Property binding

[property] = "value": The value is passed from the component to the specified property or simple HTML attribute

<input type="email" [value]="user.email">

---

From the DOM to the Component

3. Event binding

(event) = "function" : When a specific DOM event happens (eg.: click, change, keyup), call the specified method in the component

<button (click)="logout()"></button>

4. Two-way data binding

[(ngModel)] = "value": Two-way data binding allows to have the data flow both ways. For example, in the below code snippet, both the email DOM input and component email property are in sync

<input type="email" [(ngModel)]="user.email">

---

For more information

Data Binding in Angular 8