Angular 2 Data binding

Angular 2 Data binding

Angular 2 Data binding coordinates communication between the component class and its template and often involves passing data.

In lemon word we can say  Angular 2 Data binding used to pass data from Component to HTML abd from HTML to Component.

There are a couple of ways to bind data in Angular.

  1. Interpolation –
  2. One way binding –
  3. Two-way binding –
  4. Event binding –


In Angular {{ }} double curly braces is known as interpolation and by using double curly braces we can show our business data to the view part.


One way data binding

In Angular 2 we can use innerText inside square brackets [] to bind our component data to html page.

<h1 [innerText]="name"></h1>

Two way data binding

Angular Two-way data binding is used to read data from an input box and update to the Angular Component. You need write ngModel in a bit different way like [(ngModel)] (Banana in a box syntax) to achieve two-way data binding.

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

Event binding

Angular has given some predefined events like click, focus, blur in the form event binding to to call your relevant logic.

We can use (click) property event to call any specific function in Angular 2.

<button (click)="clickMe()">Click</h1>

Full-stack web and mobile app development company Contact Us : Skype: indore.webcoder Email: Sales: +91 8085506229