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].
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.