Angular Data Binding

Introduction

 

Data binding is one of the most important features in any language. It allows us to define communication (synchronization) between the model and view. Data binding is passed from component to view and from view to the component.

 

Types of Data Binding in Angular

 

String Interpolation: The type of one-way data binding where the text is between a set of curly braces often uses the name of a component property. The syntax of string interpolation is to use double curly braces {{code}}, also known as moustache syntax.

 

Property Binding (one-way data binding): Property binding is a methodology, which will assist you to bind values to the properties of HTML elements.

<button [disabled] = "isDisabled">Button disabled! </button>

export class AppComponent {
  isDisabled: boolean = true;
}

Event Binding (one-way data-binding):  A user expects a UI to respond to actions on the page. Every such action would trigger an event on the page and the page has to respond by listening to these events.

 

The event binding system provides us a way to attach a method defined in a component with an event.

 

The following snippet event on a button:

 

<button class='btn' (click)='onClick()'>Submit</button>

<button (click)="onClick()">Click me!</button>

export class ExampleComponent {
 onClick() {
 }
}

Example

 

1) This means No-Binding

<input name="txtNoBinding" ngModel> {{txtNoBinding}}

2) One-way Binding

<input name="txtOneWayBinding" [ngModel]="txtOneWayBinding"> {{txtOneWayBinding}}

3) Two Way Binding

<input name="txtFirstTwoWayBinding" [ngModel]="txtFirstTwoWayBinding" (ngModelChange)="txtFirstTwoWayBinding=$evnt"> {{txtFirstTwoWayBinding

4) Two Way Binding (2nd Method)

<input name="txtSecTwoWayBinding" [(ngModel)]="txtSecTwoWayBinding" > {{txtSecTwoWayBinding}}

5) Two Way Binding (3nd Method)

<input [value]='name' (input)='name = $event.target.value'>{{name}}

 

 

After changes

 

 

Summary

 

In this article, we learned about the Angular data binding process and its types.