Two way binding in Angular

Two way binding is nothing but the ngModel which we used in AngularJS. As the name indicates two-way binding binds changes in the view to the model and any changes in the model to the view.

Two way binding is represented with a combination of square and curly braces in Angular [(ngModel)]. The property to be bound follows the [()] symbol as follows.

[(ngModel)] = 'productName'

Let us understand two way binding with a simple example, we have a textbox in the view whose value is bound using two-way binding to a property in the component myValue. When the component initializes the value set in the component class will get displayed in the textbox, and when the user changes the value in the textbox the change is reflected in the model, we will show this by displaying the value of property myValue in a label using interpolation.

Event Binding in Angular

Event binding is one-way binding in Angular from the view to the component class. 

Event binding is used to handle events which arise out of the controls in the view, like button click event, textbox blur event etc. 

Event binding in Angular is represented using a set of braces (). The event to be triggered is placed inside the braces like (click), and the handling function comes after the = sign, as follows. 
(click)="clickHandler()"

Let us understand event binding with a simple example, we have a button in the view whose click event is bound to the handler function clickHandler(), in the hander function we set the property clickMessage which will get displayed in the view as interpolation.

app.component.ts
import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  constructor() { }

  clickMessage ='';

  clickHandler() {

    this.clickMessage = 'You clicked the Button.';

  }

}
app.component.html
<div<

  <input type="button" (click)='clickHandler()' value="Click Me"<

  {{clickMessage}}

</div<

In the view we tie the buttons click event with the event handler function clickHandler. In the event handler function we set the clickMessage property, and this gets displayed in the view as an interpolation. The output is as follows. 

Property Binding in Angular

Property binding is one-way binding in Angular from the component class to the view template. Property binding is similar to interpolations but there are few differences in the way we bind them to the view.

Property binding is mostly used to assign values to HTML tags, for example we can use property binding to assign the source URL of an image tag, assign values to a textbox etc. Property binding is used in places where we can directly assign the property without any manipulations, interpolations are used in places where we need to append the property values with other text in the template.

Let us understand property binding with a very simple example, we will set a property title in the component and assign it as value to a textbox in the view.

Interpolation in Angular

Interpolation is the simplest form of data binding in Angular, Interpolation is one-way data binding from the Component class to the view template. Interpolation is implemented using a double set of curly braces enclosing a property which is defined in the component.

{{property}}

At runtime Angular gets the value of the property from the component and displays it in the view.  Interpolation can be used to display text/messages in the view. Interpolation comes in handy when we need to append components property values with other text in the view.

Let us understand Interpolation with a very simple example, we will set a property title in the component and display it in the View using interpolation.

Types of Binding in Angular

Binding is used to bind the model properties and controller functions to the View. Let us now see the different types of bindings offered by Angular.

Angular provides 4 different types of binding.

1. Interpolations

2. Property Binding

3. Event Binding

4. Two way binding