Angular Data Binding

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>