Angular binding

Data binding automatically updates your page based on the state of the application. Data binding is used to specify things such as an image source, button state, or data for a specific user.

Angular provides three categories of data binding according to the direction of data flow:

• From the source to view
• From view to source
• In a two way sequence of view to source to view

Property binding

The property binding is one-way binding and allows to set a property of a view element to the value of a template expression.  It uses square brackets.

<div [hidden]="isHidden"></div>
<div [class.active]="isActive"></div>
​​​​​​​<img [src]="url" />

Event binding

The event binding is one-way binding and allows to listen for certain events such as keystrokes, mouse movements, clicks, and touches. It uses parentheses.

<button (click)="onClick()">click me</button>
<input (input)="onInput()" />

Interpolation

Interpolation is a one-way binding that allows to display dynamic string values and expressions into your HTML templates. It uses double curly braces.

{{ firstName }}
{{ getTitle() }}
​​​​​​​{{ 2 + 2 }}

Two-way binding

The two-way binding allows to display a data property and update that property when the user makes changes.

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

To use ngModel directive you need to import FormsModule and add it to the NgModule's imports list.

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

@NgModule({
  imports: [
    FormsModule
  ],
})
export class AppModule {}
​​​​​​​