Angular Data Binding is used to synchronize the data between component to the view. Data binding is used to bind the dynamically data between component to view based on the user requirements.
Basically There are Two Type of Binding in the Angular
1) One way data binding
2) Two-way data binding
One-way Data Binding:- It is used to data transfer from component to view or view to the component.
1) String Interpolation Binding:- This is a One way Data Binding. One-way data binding will bind the data from the component to the view (DOM) or from view to the component. One-way data binding is unidirectional.
in app.component.ts file
export class AppComponent {
employees= {
name: 'John',
age: 35
};
}
in app.component.html file
Employee Name : {{employees.name}}
Employee Age : {{employees.age}}
2) Property Binding:- The Property binding is used to bind HTML element property in the component html file like src, style, class, disabled etc using property binding.
Property binding enclose with square bracket []
in app-component.ts file
export class AppComponent {
isEnabled: boolean = false;
}
in app.component.html file
<input type="button" name="submit" [disabled]="!isEnabled" value="Save"/>
3) Event Data Binding:- Angular Event Binding is basically used to handle the events like click, keyup, keydown, etc and which is define into the component html file.
Event Binding is used to bind data from DOM to the component.
in app-component.ts file
export class AppComponent {
additems() {
console.log('add items');
}
}
in app.component.html file
<h1>Add Items</h1>
<button (click)="additems()">
2) Two Way Data Binding:- Two-way data binding is used, when you want to exchange data from the component to view and from view to the component.
in app-component.html file
<div class="container">
<input [(ngModel)]="name" />
<br/>
<h1>Hello {{name}}</h1>
</div>