Data Binding in Angular

Posted By : Manish Nayal | 18-Jan-2021

In every JS framework, data binding is a very important part. Through data binding we can achieve real-time update of dom element.

Whenever a variable is changed in controller or model it will be automatically updated in view(html) as well.

 

In angular, we can use 4 ways to bind data from the model to view or vice-a-versa:-

1) String Interpolation,

2) Property Binding,

3) Event Binding,

4) Two-way Data Binding

 

Also Read: Eager, Lazy, and preloading

 

1) String Interpolation

 

By using interpolation, we can update view from model or model from view, it is generally known as one way data binding.

In this data flow is one directional, either from model to view or view to model.

It is used to update view template from model/component class.


Syntax: {{ variableName }}

 

Example:

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

@Component({

     selector: 'app-setting',

     template: `<h1>{{ tab }}</h1>`,

     style: ``,

})

export class SettingComponent implements OnInit {

tab = 'settings';

constructor() {

       setTimeout(() => {

             this.tab = 'Home';

      }, 1000)

}

ngOnInit(): void {}

}

 

Also Read: Overview Of Angular version 10

 

2) Property Binding:

 

It is used to bind property of a HTML element. For property binding we use sequre brackets [].

 

Syntax: html property name => [value]="variable"

 

For example:

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

@Component({

     selector: 'app-setting',

     template: `<input type="text" name="user" [value]="username" />`,

     style: ``,

})

export class SettingComponent implements OnInit {

username = 'John';

constructor() {

       setTimeout(() => {

             this.username = 'Snow';

      }, 1000)

}

ngOnInit(): void {}

}

 

Also Read: Angular Components And Their Working Methodologies

 

3) Event Data Binding:

 

Event data binding helps to capture the interaction of user with html view like click, key-press, on change, etc.

 

Syntax: <button (click)="doSomething()">Click Me</button>

 

Example:

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

@Component({

     selector: 'app-setting',

     template: `<button (click)="sayHello()">Hello</button>`,

     style: ``,

})

export class SettingComponent implements OnInit {

username = 'John';

constructor() {

}

ngOnInit(): void {}

}

sayHello() {

     alert('Hello!!');

}

 

 

4) Two Way Data Binding: 

 

Two-way data binding is a combination of property binding[] and event binding().  

It is mainly used in a form, whenever a user make changes in the form, it will automatically reflect in model.

Angular provide us a directive to bind a value in two way [(ngModel)]

 

Syntax: <input name="user" type="text" [(ngModel)]="variableName" />

 

Example:

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

@Component({

     selector: 'app-setting',

     template: `<h1>Hello {{ username }}</h1><br>

                       <input type="text" name="user" [(ngModel)]="username" /> `,

     style: ``,

})

export class SettingComponent implements OnInit {

username = 'John';

constructor() {

}

ngOnInit(): void {}

}

 

Choose Oodles For SaaS App Development Services

 

We are a 360-degree software development company that provides cross-platform SaaS app development services to address varied software project requirements. We have an experienced team of Java, PHP, and Python developers who use advanced frameworks, tools, and SDKs to build scalable web and mobile applications with custom features. For more detail, reach us out at [email protected].

About Author

Author Image
Manish Nayal

He likes making stuff on the Internet and specialises in designing digital products such as websites and web apps. He is frontend developer having good knowledge of various frontend technologies.

Request for Proposal

Name is required

Comment is required

Sending message..