Angular Templates and Control Flow

An Angular template is HTML with extra syntax that connects it to the component class.

Interpolation

Use {{ }} to show a value or a simple expression:

Example

typescript

@Component({
  selector: "app-bill",
  template: `
    <p>Customer: {{ customer }}</p>
    <p>Total: Rs {{ price * quantity }}</p>
    <p>{{ customer.toUpperCase() }}</p>
  `,
})
export class Bill {
  customer = "Hamza";
  price = 250;
  quantity = 4;
}

Output

Customer: Hamza
Total: Rs 1000
HAMZA

Property Binding [ ]

Square brackets set an element's property from the class:

Example

html

<img [src]="photoUrl" [alt]="customer" />
<button [disabled]="cartIsEmpty">Checkout</button>
<div [class.active]="isActive">Menu</div>
<p [style.color]="isLate ? 'red' : 'green'">Fee status</p>

Without brackets, src="photoUrl" would be the plain text "photoUrl".

Event Binding ( )

Round brackets listen to events and run a method:

Example

typescript

@Component({
  selector: "app-likes",
  template: `
    <p>Likes: {{ likes }}</p>
    <button (click)="like()">Like</button>
    <input (keyup.enter)="search($event)" placeholder="Search and press Enter" />
  `,
})
export class Likes {
  likes = 0;

  like() {
    this.likes++;
  }

  search(event: Event) {
    const value = (event.target as HTMLInputElement).value;
    console.log("Searching for", value);
  }
}

Binding Summary

Syntax	Name	Direction
`{{ value }}`	Interpolation	Class to page (text)
`[property]="value"`	Property binding	Class to page
`(event)="method()"`	Event binding	Page to class
`[(ngModel)]="value"`	Two-way binding	Both ways (needs `FormsModule`)

@if

Built-in control flow blocks start with @. @if shows a block when a condition is true:

Example

html

@if (marks >= 80) {
  <p>Grade A, excellent!</p>
} @else if (marks >= 60) {
  <p>Grade B, good work.</p>
} @else {
  <p>Keep practising.</p>
}

With marks = 65:

Output

Grade B, good work.

@for

@for repeats a block for each item. The track part is required: it tells Angular how to identify each item, usually by id.

Example

typescript

@Component({
  selector: "app-menu",
  template: `
    <ul>
      @for (dish of dishes; track dish.id) {
        <li>{{ $index + 1 }}. {{ dish.name }}: Rs {{ dish.price }}</li>
      } @empty {
        <li>No dishes today.</li>
      }
    </ul>
  `,
})
export class Menu {
  dishes = [
    { id: 1, name: "Nihari", price: 550 },
    { id: 2, name: "Haleem", price: 400 },
    { id: 3, name: "Chicken Karahi", price: 1400 },
  ];
}

Output

1. Nihari: Rs 550
2. Haleem: Rs 400
3. Chicken Karahi: Rs 1400

The @empty block shows when the list is empty. Inside @for you can use variables like $index, $first, $last and $count.

@switch

Example

html

@switch (role) {
  @case ("admin") { <p>Full access</p> }
  @case ("teacher") { <p>Can edit classes</p> }
  @default { <p>Student view</p> }
}

Older Angular code uses *ngIf, *ngFor and [ngSwitch]. The new @if, @for and @switch blocks are easier to read, faster, and need no imports.

Pipes

Pipes format values in the template. Write them with the | symbol after the value, for example {{ today | date }}. Common pipes:

Pipe	Example result
`uppercase`	`KARACHI`
`date`	`Oct 15, 2026`
`currency:'PKR'`	`PKR 1,500.00`
`number`	`12,500`

Import the pipe you use, such as DatePipe or UpperCasePipe, into the component's imports array.

Exercise

In @for (item of items; track item.id), what is track used for?

To sort the listTo count the itemsTo tell Angular how to identify each item when the list changesTo add a CSS class to each item