There are mainly 4 types of data binding are available in Angular. Interpolation, Two-way data binding, event binding, and property binding. these bings are used to transfer the data from component to view and view to the component.
- Interpolation
- Two-way data binding
- Event binding
- Property binding
What is Interpolation Data Binding in Angular?
- Angular interpolation is used to display a component property in the respective HTML view template with double curly-braces "{{}}" syntax.
- We can display all kinds of property data into view e.g. date, arrays, list, number, string, modal data, or map.
- Data binding consist of one-way data binding and two-way data binding. Interpolation is used for one-way data-binding from component to HTML elements.
- Interpolation moves data in one direction from our components to HTML elements.
Simple Syntax:
<div>{{ vendorName }}</div>
<div>{{ object.customerName }}</div>
Example with Component using inline HTML
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-ATG',
template: `
<div>Welcome {{ vendorName }}! </div>
<div>present Time {{ getTimeNow() }}!</div>`,
styleUrls: ['./ATG.component.css']
})
export class GreetComponent implements OnInit {
vendorName: string = "All Tech Geeks";
getTimeNow(): string {
return 'evening';
}
What is Property Data Binding Angular?
it helps to set the values for property and it is a one-way data-binding from component to HTML view template.
Simple HTML
<div>
Hello ATG.
</div>
<button class="btn btn-primary">Add Vendors</button>
Property binding example
<div>
Hello ATG 2.
</div>
<button class="btn btn-primary" [disabled]="allowNewATGServer">
Add Vendor</button>
Component class for the above snippet
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-ATG2',
templateUrl: './ATG2.component.html',
styleUrls: ['./ATG2.component.css']
})
export class CAT2Component implements OnInit {
allowNewATGServer = false;
constructor() {
setTimeout(() =>{
this.allowNewATGServer= true;
}, 9000);
}
ngOnInit() {
}
}
What is Event Data Bindingin Angular?
In Angular, it is nothing but passes the data from UI (HTML) to Component. event binding is used to handle the events raised by the client/ user/ HTML actions like the below events.
- a button click,
- a mouse movement
- keystrokes
- key up
- key down
- mouse scroll e.g.
When the DOM or client event happens at any element(e.g. click, key-down, key-up), it calls the specified method of that element in the particular component.
Using Event Binding we can bind data from DOM to the component and hence we can use that data for further use.
below is the example for login in this example we have used the "ngSubmit" with onSubmit method (ngSubmit)="onSubmit()"
<div class="card-body">
<form [formGroup]="loginFB" (ngSubmit)="onSubmit()">
<div class="form-group">
<input type="text" formControlName="UserName" class="form-control" />
</div>
<div class="form-group">
<input type="text" id="password" formControlName="Password"
class="form-control"/>
</div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block text-uppercase"
type="submit">Login</button>
</div>
</form>
</div>
The Typescript code at component is below snippet
onSubmit() {
this.loginModel.UserName = this.loginFB.get('UserName').value;
this.loginModel.Password = this.loginFB.get('Password').value;
// tslint:disable-next-line:no-debugger
debugger;
this.userService.login(this.loginModel)
.subscribe(
(res: any) => {
localStorage.setItem('token', res.token);
// tslint:disable-next-line:no-debugger
debugger;
this.router.navigateByUrl('/home');
},
error => {
this.erroMeg = 'error';
});
}
What is Two-Way Data Bindingin Angular?
this binding is very helpful when we are going to work both directional. In two-way data binding, automatic synchronization of data happens between the Model and the View with the help of the Component. due to that, any changes are reflected in both components.
Example
If you make any changes in the Model, it will be reflected in the View and when you make any changes in View, it will be reflected in the Model
<div>Two-way Binding Vendor Example</div>
<input [(ngModel)]="vendorName" />
<div> {{vendorName}} </div>
Conclusion:
Data binding is the most powerful Element of Angular. because it gives us the data flow from view to component vise verse. we have discussed four types of Data binding in Angular helps to understand while you writing the angular code
Post a Comment (0)