Two way data binding in angular 2

        Consider angular 1 is a great feature for two-way data binding system. It's very helpful to access a variable in a directive and modifying value shows the user view or web view.

         In this feature is not available in angular > 2.0 greater than version because of here not in a use of the directive structure. So In this feature will implement angular 2 means, we require to know the event and properties binding details.

Properties binding:

[] : -  The behind of the symbol to binding a property in HTML element of view page in angular 2.

Example:

<input type="text" name="firstname" [ngModel] = "firstName">

The above line of code is firstName value is to bind ngModel of an input element.

Event Binding:

(): - The behind of the sysmbol to binding an event in the included HTML element in angular 2.

Example:

<input type="text" name="firstname" [ngModel] = "firstName" (onClick)="changeValue()">

This above line of code is an event bind in input tag for on click method.

Two-Way binding:

The above both bindings are integrated to achieve the two-way data binding in angualar2.

Symbol: [()]

Example:

<form #twowayFrm="ngForm">

<span>Two way Data binding</span><br>

<div class="form-control">

<label> User Name</label>

<input type="text" name="lastname" [(ngModel)]="lastName">

<span>{{lastName}}</span>

</div>

</form>