Hello Readers,

Data binding is a way where we can specify what user see with the application data values. Application should be easy to read, write i.e it should be user friendly, so data binding is very important part in application.
Angular provides many type of data binding.

Lets discuss about binding syntax in Angular2 : It depends on the what will the binding type. Which are as follows:

• Property : It can be Element, Component, Directive property. Property is enclosed with  [ ] braces.

Element Property -

<img [src] = "image">

Component Property -

<my-app [user]="userName"></my-app>

Directive Property -

<div [ngClass] = "{selected: isSelected}"></div>

• Event : It can be Element, Component, Directive event. Events are enclosed with ( ) braces.

Element Property -

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

Component Property -

<my-app (addUser)="userList()"></my-app>

Directive Property -

<div (myClick)="clicked=$event">click me</div>

• Two-way :  Two-way binding on event and property. It is enclosed with [( )].

<input [(ngModel)]="userName">

• One-way (Interpolation) : It shows component property between two curly {{ }} braces.

<p>{{userName}}</p>

This is the basic overview on binding syntax and binding targets. Hope this will help you :)