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>