Angular Interview Questions

Data binding in Angular is a powerful feature that allows you to synchronize data between the model (component class) and the view (HTML template). It enables dynamic updates of the user interface in response to changes in the underlying data model, providing a seamless user experience. Data binding in Angular can be categorized into four main types: Interpolation, Property Binding, Event Binding, and Two-Way Data Binding.

1. Interpolation:

• Definition: Interpolation is a form of one-way data binding that allows you to embed expressions in the HTML template.
• Syntax: {{ expression }}
• Purpose: It evaluates the expression and inserts the resulting value into the DOM.
• Example:

  <p>{{ message }}</p>

  export class AppComponent {
    message: string = 'Hello, Angular!';
  }

2. Property Binding:

• Definition: Property binding is another form of one-way data binding where you set the value of an HTML property or attribute from the component.
• Syntax: [property]="expression"
• Purpose: It binds the expression to the property of an HTML element.
• Example:

  <img [src]="imageUrl">

  export class AppComponent {
    imageUrl: string = 'https://example.com/image.png';
  }

3. Event Binding:

• Definition: Event binding allows you to listen to and respond to user events such as clicks, key presses, or mouse movements.
• Syntax: (event)="handler"
• Purpose: It binds an event to a handler method in the component, allowing the component to react to user interactions.
• Example:

  <button (click)="onClick()">Click me</button>

  export class AppComponent {
    onClick() {
      console.log('Button clicked!');
    }
  }

4. Two-Way Data Binding:

• Definition: Two-way data binding allows for bidirectional synchronization between the component's data and the view. It combines property binding and event binding.
• Syntax: [(ngModel)]="property"
• Purpose: It updates the component property when the user makes changes in the view and updates the view when the component property changes.
• Example:

  <input [(ngModel)]="name">
  <p>Hello, {{ name }}!</p>

  export class AppComponent {
    name: string = 'Angular';
  }

• Note: To use ngModel, you need to import FormsModule from @angular/forms in your Angular module.

In Summary:
Data binding in Angular is a key feature that facilitates communication between the component class and the template, enabling a dynamic and interactive user experience. The main types of data binding are:

1. Interpolation: Embedding expressions in the template.
2. Property Binding: Setting element properties or attributes from the component.
3. Event Binding: Handling user events and executing component methods.
4. Two-Way Data Binding: Synchronizing data between the component and the view, ensuring that changes in one are reflected in the other.

These binding mechanisms are essential for building responsive and dynamic Angular applications.