Types of data binding in angular 11,12,13 with example
Angular introduction
Angular is a javaScript framework introduced by google .Actually this is open source full stack web application framework special developed for SPA(single page application).Angular provides many features and with the help of the this framework we can create not only web applications but also hybrid and native applications with the help of some other frameworks like IONIC ok let's move forward to the main topic i wil provide another article for ionic how we can use it to create hybrid and native applications.
What is data binding ?
Data binding is the technique of binding data from component to template .Angular provides many feature of data binding to bind data from component to view dynamically.In angular we have two types of data binding way .
1.One Way Data Binding
2.Two Way Data Binding
One Way Data binding
In this type of data binding we can bind data in the one way means we can bind data in HTML DOM elements in one way means we can modify them from view modification is only possible only from component side .
So let's discuss about some data binding in angular
String interpolation
string interpolation is the fetaure of binding data im single way means whatever value we want to add on the HTML DOM element we just need to place that value inside{{}} double curly brasses.
Example:-
let's assume this your component
import { Component } from '@angular/core';
import........
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewChecked {
constructor(
) {
}
Here in this component we have added a variable default value "HELLO WORLD" now we will
show the this variable data in the HTML view .For that we have add this variable inside
double curly brasses like this .
<div class="container">
<div>{{variable}}</div>
</div>
Event binding
In this type of data binding we can trigger events like click,mouse up,mousedown,change
and many more .
To make event binding in angular we have to add the function is to trigger like this
<div class="container">
<button (click)="showData($event)">{{variable}}</button>
</div>
here we are triggering a method with the help of (click) and with a parameter $event
from which we can check all the status and details of the event what type of event is it
and what is the status of event.
inside component we have catch the event like this
showData($event: any){
console.log("button clicked");
if($event) {
console.log($event.target);
}
}
property binding
In this binding we can bind our variable value inside the input elements means if we want
to perform any update operation in our application we have to edit the vaues inside the
text boxes.So do add the default editable value in the text box we can use this binding
technique.
Example:-
Lets' assume we have a variable like this inside our component class with default value
.
import { Component } from '@angular/core';
import ......
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewChecked {
constructor(
) {
}
And we can bind this variable value to the text box like this
<input type="text" [value]="varablename">
and thats it when you will navigate to this component or page you can see default
value will
be inside the text box.
Class binding
In this type of binding we bind the class from the component .means to modify the
view design dynamically we can use this data binding technique .
let's understand with a small example
suppose we have a component with variable like this
export class Component {
myClass = "red";
ifClass = false;
}
Here we have two types of variable one with default value "RED " another with boolean value here we can bind the class or we can add the class as per the boolean variable value means if the value of the boolean variable will true then only we can bind one particular class on the HTML DOM elements.
<div [class]="myClass">
in this example we are binding the class from component to the view element .
<div [class.red]="If Class">
In this example we have used second variable which will add the class conditionally if the value of the
boolean variable will be true.
Two Way Data Binding
In this type of data binding we can bind data from both side means data flow happens from both side
from component to HTML element and from HTML elements to component..
Suppose we have a use can of a form in which we can do the modify the data from both end then we
can use this binding technique to achieve that .
For two data binding we simply use [(ngModel)] derective.
Let's see one example of two data binding
we have one component with some variables
import { Component } from '@angular/core';
import ......
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewChecked {
variable2="my name is Anil";
variable="i am a good boy"
constructor(
) {
}
Here if we want to the two data binding then we have to bind all the variables of the form HTML elements like this
<form >
<input for="name" [(ngMode)]="variable 1>
<input for="name" [(ngMode)]="variable 1>
<input for="name" [(ngMode)]="variable 1>
</form>
In this html content we have added variables inside [(ngModel)] now we can bind data from componet
and also can update the data from view side means can modify whatever value you want from the text
boxes the value of modified variable will e automatically change .
Thanks for visiting our site if our contents are helpful for you then please put a comment on this article
Tags:
Angular