Templates & Data Binding 🎨

Angular templates are HTML files with Angular-specific markup that define how your component’s view should be rendered. Combined with data binding, they create dynamic, interactive user interfaces.

🎯 What are Templates?

Templates are HTML files that tell Angular how to render a component. They combine regular HTML with Angular markup such as:

Interpolation - Display component data
Property binding - Set element properties
Event binding - Listen to user actions
Two-way binding - Combine property and event binding
Directives - Add behavior to elements

🔗 Interpolation

Display component data in templates using double curly braces:

<h1>Welcome, {{userName}}!</h1>
<p>You have {{messageCount}} new messages</p>
<div>Current time: {{getCurrentTime()}}</div>

export class User {
  userName = 'John Doe';
  messageCount = 5;

  getCurrentTime(): string {
    return new Date().toLocaleTimeString();
  }
}

Expressions in Interpolation

<!-- Simple expressions -->
<p>Total: {{price + tax}}</p>
<p>Full name: {{firstName + ' ' + lastName}}</p>
<p>Is admin: {{user.role === 'admin'}}</p>

<!-- Method calls -->
<p>Formatted price: {{formatPrice(price)}}</p>

<!-- Conditional expressions -->
<p>Status: {{isOnline ? 'Online' : 'Offline'}}</p>

⬇️ Property Binding

Bind component properties to element attributes using square brackets:

<!-- Bind to element properties -->
<img [src]="imageUrl" [alt]="imageDescription">
<button [disabled]="isLoading">Submit</button>
<div [class]="cssClass" [style.color]="textColor">Content</div>

<!-- Bind to component properties -->
<app-user-card [user]="selectedUser" [showDetails]="true"></app-user-card>

export class Product {
  imageUrl = 'https://example.com/product.jpg';
  imageDescription = 'Product image';
  isLoading = false;
  cssClass = 'highlight';
  textColor = 'blue';
  selectedUser = { name: 'Jane', email: 'jane@example.com' };
}

Class and Style Binding

<!-- Class binding -->
<div [class.active]="isActive">Toggle class</div>
<div [class]="'btn btn-' + buttonType">Dynamic classes</div>
<div [class.active]="isActive" [class.disabled]="isDisabled">Multiple classes</div>

<!-- Style binding -->
<div [style.color]="textColor">Colored text</div>
<div [style.font-size.px]="fontSize">Sized text</div>
<div [style.color]="textColor" [style.font-size.px]="fontSize">Multiple styles</div>

⬆️ Event Binding

Listen to DOM events using parentheses:

<!-- Basic event binding -->
<button (click)="handleClick()">Click me</button>
<input (keyup)="onKeyUp($event)" (blur)="onBlur()">
<form (submit)="onSubmit($event)">

<!-- Pass event data -->
<button (click)="selectItem(item.id)">Select</button>
<input (input)="updateValue($event.target.value)">

export class Event {
  handleClick(): void {
    console.log('Button clicked!');
  }

  onKeyUp(event: KeyboardEvent): void {
    console.log('Key pressed:', event.key);
  }

  selectItem(id: number): void {
    console.log('Selected item:', id);
  }

  updateValue(value: string): void {
    console.log('Input value:', value);
  }

  onSubmit(event: Event): void {
    event.preventDefault();
    console.log('Form submitted');
  }
}

🔄 Two-Way Data Binding

Combine property and event binding with [(ngModel)]:

<!-- Two-way binding with forms -->
<input [(ngModel)]="username" placeholder="Enter username">
<textarea [(ngModel)]="description"></textarea>
<select [(ngModel)]="selectedOption">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

<!-- Display bound values -->
<p>Username: {{username}}</p>
<p>Description: {{description}}</p>
<p>Selected: {{selectedOption}}</p>

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

@Component({
  imports: [FormsModule],
  // ... template
})
export class FormComponent {
  username = '';
  description = '';
  selectedOption = 'option1';
}

📍 Template Reference Variables

Create references to DOM elements or components:

<!-- Reference to input element -->
<input #nameInput type="text" placeholder="Enter name">
<button (click)="greet(nameInput.value)">Greet</button>

<!-- Reference to component -->
<app-counter #counterRef></app-counter>
<button (click)="counterRef.reset()">Reset Counter</button>

<!-- Use in template -->
<p>Input length: {{nameInput.value.length}}</p>

export class TemplateRefComponent {
  greet(name: string): void {
    alert(`Hello, ${name}!`);
  }
}

🔧 Pipes

Transform displayed data without changing the original:

<!-- Built-in pipes -->
<p>{{message | uppercase}}</p>
<p>{{price | currency:'USD':'symbol':'1.2-2'}}</p>
<p>{{today | date:'fullDate'}}</p>
<p>{{users | json}}</p>

<!-- Chaining pipes -->
<p>{{message | lowercase | titlecase}}</p>

<!-- Pipe with parameters -->
<p>{{longText | slice:0:50}}...</p>

export class PipeComponent {
  message = 'Hello World';
  price = 99.99;
  today = new Date();
  users = [{name: 'John'}, {name: 'Jane'}];
  longText = 'This is a very long text that needs to be truncated...';
}

Common Built-in Pipes

uppercase / lowercase - Text case
currency - Format currency
date - Format dates
json - Display object as JSON
slice - Extract portion of array/string
async - Handle observables/promises

🎨 Conditional Rendering

Show/hide elements based on conditions using the control flow syntax:

<!-- @if syntax -->
@if (isLoggedIn) {
  <div>Welcome back!</div>
} @else {
  <div>Please log in</div>
}

<!-- @if with else if -->
@if (isLoading) {
  <div>Loading...</div>
} @else if (hasError) {
  <div>Error occurred!</div>
} @else {
  <div>Content loaded!</div>
}

<!-- Simple conditional -->
@if (hasData) {
  <p>Data available</p>
}

In older Angular versions (pre-v17), this was done with:

<div *ngIf="isLoggedIn">Welcome back!</div>
<div *ngIf="!isLoggedIn">Please log in</div>

<div *ngIf="isLoading; else content">Loading...</div>
<ng-template #content>
  <p>Content loaded!</p>
</ng-template>

This syntax is still supported but not recommended for new projects.

🔁 Lists and Loops

Repeat elements using the @for syntax:

<!-- @for syntax -->
<ul>
  @for (item of items; track item.id) {
    <li>{{item.name}}</li>
  }
</ul>

<!-- @for with index -->
<div>
  @for (user of users; track $index) {
    <div>{{$index + 1}}. {{user.name}}</div>
  }
</div>

<!-- @for with empty state -->
@for (product of products; track product.id) {
  <div>{{product.name}} - ${{product.price}}</div>
} @empty {
  <div>No products available</div>
}

<!-- @for with multiple variables -->
@for (item of items; track item.id; let isFirst = $first, isLast = $last) {
  <div [class.first]="isFirst" [class.last]="isLast">
    {{item.name}}
  </div>
}