Templates and Data Binding

# CHAPTER 6

Templates and Data Binding #

1. Chapter Introduction #

2. Learning Objectives #

• Use Interpolation ({{ }}) to display class properties.

• Use Property Binding ([ ]) to set HTML attributes dynamically.

• Use Event Binding (( )) to react to user interactions.

• Use Two-Way Binding ([( )]) to synchronize form inputs.

• Build a live form preview mini project.

3. The Four Types of Data Binding #

TypeScript Class -----> HTML Template   (One-Way: Interpolation, Property Binding)
TypeScript Class <----- HTML Template   (One-Way: Event Binding)
TypeScript Class <----> HTML Template   (Two-Way: ngModel)

4. Interpolation {{ }} #

export class GreetingComponent {
  title: string = 'Welcome to Angular!';
  currentYear: number = 2024;
  username: string = 'Alice';
}

<!-- greeting.component.html -->
<h1>{{ title }}</h1>
<p>Hello, {{ username }}! Copyright {{ currentYear }}</p>

<!-- You can also use expressions! -->
<p>Next year: {{ currentYear + 1 }}</p>
<p>Uppercase: {{ username.toUpperCase() }}</p>

5. Property Binding [ ] #

export class ImageComponent {
  imageUrl: string = 'https://example.com/avatar.png';
  buttonDisabled: boolean = true;
}

<!-- Sets the &#039;src' attribute to the imageUrl property value -->
<img [src]="imageUrl" alt="User Avatar" />

<!-- Disables the button if &#039;buttonDisabled' is true -->
<button [disabled]="buttonDisabled">Submit</button>

6. Event Binding ( ) #

export class CounterComponent {
  count: number = 0;

  increment(): void {
    this.count++;
  }

  reset(): void {
    this.count = 0;
  }
}

<h2>Count: {{ count }}</h2>

<!-- Calls increment() when clicked -->
<button (click)="increment()">+1</button>
<button (click)="reset()">Reset</button>

7. Two-Way Binding [( )] (Banana in a Box) #

*Note: For Two-Way Binding with ngModel, you must import FormsModule in your module or component.*

export class LivePreviewComponent {
  username: string = '';
  email: string = '';
}

<input [(ngModel)]="username" placeholder="Enter your name" />
<input [(ngModel)]="email" placeholder="Enter your email" />

<!-- Live preview updates as you type! -->
<div class="preview">
  <p>Name: {{ username }}</p>
  <p>Email: {{ email }}</p>
</div>

8. Mini Project: Live Form Preview App #

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

@Component({
  selector: 'app-profile-editor',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './profile-editor.component.html'
})
export class ProfileEditorComponent {
  name: string = 'Your Name';
  role: string = 'Your Role';
  bio: string = 'Your bio here...';
}

<!-- profile-editor.component.html -->
<div class="editor-layout">
  <div class="form-panel">
    <h3>Edit Profile</h3>
    <input [(ngModel)]="name" placeholder="Name" />
    <input [(ngModel)]="role" placeholder="Role" />
    <textarea [(ngModel)]="bio" placeholder="Bio"></textarea>
  </div>

  <div class="preview-panel">
    <h3>Live Preview</h3>
    <h2>{{ name }}</h2>
    <span>{{ role }}</span>
    <p>{{ bio }}</p>
  </div>
</div>

9. Common Mistakes #

• Using {{ }} for HTML attributes: <img src="{{ imageUrl }}" /> works but is considered bad practice for non-string attributes. Always use [src]="imageUrl" for attributes.

• Forgetting FormsModule for ngModel: If [(ngModel)] throws an error, you have not imported FormsModule. Add it to the imports array.

10. MCQs with Answers #

11. Interview Questions #

• Q: Explain the difference between Property Binding and Interpolation. When would you use one over the other?

• Q: How does two-way data binding with [(ngModel)] work internally? (Answer: It is syntactic sugar for [ngModel]="val" (ngModelChange)="val=$event")

12. Summary #

13. Next Chapter Recommendation #