Chapter 1.2 Templates & Data Binding in Angular – Interpolation, Property & Event Binding, Two-way Binding

Introduction

Templates and data binding are fundamental concepts in Angular that allow developers to create dynamic and interactive applications. Understanding interpolation, property binding, event binding, and two-way binding is crucial for building efficient Angular applications.

Angular Templates

A template in Angular defines the UI structure of a component. It is an HTML file (or inline HTML) that contains standard HTML elements along with Angular directives and bindings.

Example of a Simple Template

<h1>Welcome to Angular</h1>
<p>{{ message }}</p>
<button (click)="showMessage()">Click Me</button>

Here, {{ message }} is an example of interpolation, and (click)="showMessage()" is an example of event binding.

Data Binding in Angular

Data binding connects the component’s logic with the UI, ensuring smooth communication between them.

Types of Data Binding:

1. Interpolation ({{ }}) – One-way binding to display data in the template.
2. Property Binding ([property]="expression") – One-way binding to set element properties.
3. Event Binding ((event)="handler") – One-way binding to respond to user events.
4. Two-way Binding ([(ngModel)]="data") – Synchronizes data between the component and the template.

1. Interpolation ({{ }})

Interpolation is used to embed component properties inside the HTML template.

Example:

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

<h2>Welcome to {{ name }}!</h2>

Note: Interpolation can only bind string values. For non-string values, use property binding.

2. Property Binding ([property])

Property binding allows setting DOM properties dynamically.

Example:

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

<img [src]="imageUrl" alt="Dynamic Image">

Difference from Interpolation: Property binding is more suitable for non-string values like numbers, booleans, or objects.

3. Event Binding ((event)="handler")

Event binding allows executing a method when a user interacts with an element.

Example:

export class AppComponent {
  showAlert() {
    alert('Button Clicked!');
  }
}

<button (click)="showAlert()">Click Me</button>

Common Events: click, keyup, keydown, mouseover, mouseenter, mouseleave.

4. Two-Way Binding ([(ngModel)])

Two-way binding synchronizes component data with form inputs.

Example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  username: string = '';
}

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

Note: Two-way binding requires importing FormsModule in app.module.ts.

import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [FormsModule]
})

Angular Interview Questions & Answers

Q1. What is Interpolation in Angular?

Answer: Interpolation ({{ }}) is a one-way data binding technique that embeds component properties inside the template.

Q2. How does Property Binding differ from Interpolation?

Answer: Interpolation can only bind strings, while property binding ([property]="expression") binds any type of data, including numbers, booleans, and objects.

Q3. What are the types of Data Binding in Angular?

Answer: The four types of data binding are:

1. Interpolation ({{ }}) – Displays component values.
2. Property Binding ([property]) – Sets properties dynamically.
3. Event Binding ((event)) – Handles user interactions.
4. Two-way Binding ([(ngModel)]) – Synchronizes component and UI.

Q4. How does Two-Way Binding work in Angular?

Answer: Two-way binding ([(ngModel)]) ensures that any changes in the input field update the component property, and vice versa.

Q5. What is the difference between Event Binding and Property Binding?

Answer:

• Event Binding ((event)="handler()") triggers methods when user actions occur.
• Property Binding ([property]="expression") dynamically sets element properties.

Q6. How do you enable Two-Way Binding in Angular?

Answer: You need to import FormsModule in app.module.ts and use [(ngModel)] in the template.

Q7. Why should we use Property Binding instead of Interpolation for src attributes?

Answer: Property binding is preferred because it directly binds to the element’s property, ensuring proper handling of non-string values like URLs.

Conclusion

Understanding templates and data binding is essential for mastering Angular development. These techniques allow developers to build dynamic and interactive applications efficiently.

Stay tuned for more Angular guides! 🚀