Two Way Binding In Angular

Two Way Binding In Angular

Two way Binding:

• Two-way bindings are bindings that read from an input and update the model. 
• Two-way bindings listen for particular events such as change or click and update the data model with new data when a change is detected.

Two-Way Binding Syntax:

• [(target)] = "source" is two-way binding where [] is to set value from source to target and () is to set value from target to source. 

For example find the code snippet:  

<msg-app [(cdMsg)] ="msg"> </msg-app>

• bindon-target = "source" is also two-way binding syntax where bind sets value from source to target and onsets value from target to source.

For example find the code snippet: 

<msg-app bindon-cdMsg ="msg"> </msg-app>

• [(ngModel)] = "source" is a two-way binding using NgModel directive. We will use [(ngModel)] in HTML element where we set a specific element property and listen for an element change event . We will use two-way binding with NgModel in text box and select box in our example. [(ngModel)] can set only data-bound property. To use NgModel we need to import FormsModule and add it to imports attribute of @NgModule in our module file

For example find the code snippet: 

<input type="text" [(ngModel)] ="myMsg"/>

Two way Binding Example: 

Using NgModel(Most commonly used approach):

<div>

<h5>Two way binding Example</h5>       Enter you Name:

<input [(ngModel)]="enterName" />

<br/><br/>

<span> WelCome {{enterName}} ! </span>

</div>

Same logic using bindon Syntax:

<div>

<h5>Two way binding Example</h5>       Enter you Name:

<input bindon-ngModel="enterName" />

<br/><br/>

<span> WelCome {{enterName}} ! </span>

</div>

Solution Description:

• Whatever value , we type in text box will be updated in span tag. 

Note: FormsModule should be imported from @angular/forms in AppModule.

Without Using NgModel:

<div>

<h5>Two way binding (without ngModel directive) Example</h5>       Enter you Name:

<input  #txtName  type =  "text"   (keyup)="0"  />

<br/><br/>

<span> WelCome {{txtName.value}} ! </span>

</div>

Solution Description:

• Text box triggers the keyup event explicitly which in turn updates the local reference #txtName
• Updated local reference getting displayed in the span tag

Stay tuned.. Happy Learning!!