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
<div>Title : {{employees.name}}</div>
<div>Price : {{employees.age}}</div>
2) Property Binding:- Property binding is used to set a property of view element.
in app-component.ts file
export class AppComponent {
myName: string = "John";
}
in app.component.html file
<input [value]='myName'></span>
3) Event Data Binding:- when clicking on the event then call a function which is in the component class.
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>