Angular Data Binding

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>

Angular Data Binding – Interview Questions

Angular Data Binding – Objective Questions (MCQs)