Data Binding Techniques in Angular

Data Binding Techniques in Angular

The main purpose of the Components is to provide dynamic data to the Html view template. Also, Components must handle user interactions, and events occurred on the Html view. 

Components take the help of the data binding provided by Angular to interact with the Html view. 

The data binding keeps both the components and view in sync with each other so that any change in the view gets updated in the component model automatically and If there is any update in the component's model, data gets updated to the view.

Various Data binding in Angular

1. Interpolation or String Interpolation

2. Property Binding

3. Event Binding

4. Two-way data binding 

Interpolation in Angular

Interpolation is the easiest way to bind the component's properties or functions to the Component's template view. 

Angular uses double curly braces {{}} in the template to denote Interpolation. 

Interpolation is the One-way data binding technique that means values go from the component to the Html view.

Now let's see how you can bind the above component properties to the View. 

Property Binding in Angular

Like Interpolation, Property binding is also a one-way data-binding technique that means data flows from the component to the view. Property binding enables you to bind the component's property to the property in an Html element, for example, class, href, src, etc.

For Property binding, you have to use square brackets []. 

Component: 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  isDisabled = true;

  constructor() {
    setTimeout(() => {

      this.isDisabled = false;

    }, 2000);
  }

}

Note: Properties bind with the Html element must be a boolean property. In the above example, isDisabled property in the component is a boolean property.

As you can see, the "isDisabled" property gets an updated value after the timeout. The updated value in the component flows to the value of [disabled] property in the view and enables the button.

Event Binding in Angular

Event binding is also a one-way data-binding technique in Angular in which data flows from the Html view to the component. Event binding is used to handle events on the view, like button click, input change, etc in the view.

The component is responsible to handle events that occurred in the View. For example, If the user types some text in the textbox, the model in the component gets updated automatically using event binding.

<button (click) = "OnClick()" >Click me</button>
<br/>
<b> The button is clicked {{clickcounter}} times</b>

<hr>

<input type="text" (input) = "OnInput($event)"> <br/>
<b>{{inputVal}}</b>

Component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  clickcounter = 0 
  inputVal = ""

  OnClick(){
    this.clickcounter++

  }

  OnInput(event:any){

    this.inputVal = event.target.value;
    
  }

}

Two-way Data binding in Angular

Two-way data binding means that changes made to our model in the component are reflected in the View and similarly any change in the view gets updated to the component model. Two- way data binding can be done using the ngModel directive present in FormsModule.

To use two-way data binding in Angular, you need to import FormsModule in the app.module.ts file.

Now we can use ngModel for two-way data binding. 

app.component.html

First Name : <input type="text" [(ngModel)] = "firstName"   /> 

Last Name : <input type="text" [(ngModel)] = "lastName" /> <br/>


<p> Hello {{firstName}} {{lastName}} </p> <br/>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  firstName = "Rohan" 
  lastName = "Sharma"

}