ANGULAR: Angular Flow Control | Amr Tarek

Angular allows you to control the flow and make decisions in the frontend by using a special Angular syntax called directives. Directives are like special HTML attributes that are only recognised and processed by Angular.

There are built-in directives like ngClass, ngIf, and ngFor, and you can even create custom directives.

Angular Directives

Structural Directives

Structural directives change the structure of an HTML document by adding or removing HTML elements. They are identified by the prefix before the directive name (e.g., ngIf, *ngFor).

HTML Template
     |
     v
Angular parses *directives
     |
     +---> *ngFor  --> Repeats element for each item in array
     |
     +---> *ngIf   --> Shows/hides element based on condition
     |
     +---> *ngSwitch --> Switches between multiple views

Setting Up Component Data

Before using structural directives in the template, the component TypeScript provides the data:

import { IProduct } from './product.model';

export class CatalogComponent {
  products: IProduct[];

  constructor() {
    this.products = [
      {
        id: 1,
        description: "This is the product description",
        name: "Product Alpha",
        imageName: "product.png",
        price: 199,
        discount: 0.2,
      },
      {
        id: 2,
        description: "This is the product description 2",
        name: "Product Beta",
        imageName: "product2.png",
        price: 299,
        discount: 0.4,
      },
    ];
  }

  getImageUrl(product: IProduct): string {
    return '/assets/image/products/' + product.imageName;
  }
}

`*ngFor` — Repeating Elements

*ngFor works like a JavaScript for...of loop in the template. It repeats the host element and its contents for every item in an array.

<ul>
  <li class="product-item" *ngFor="let product of products">
    <div class="product-details">
      <div class="name">{{ product.name }}</div>
      <div class="price">${{ product.price.toFixed(2) }}</div>
    </div>
  </li>
</ul>

This creates a product variable from the products array and repeats the full <li> element for every value in the array.

Getting the Index

You can also access the current loop index:

<li *ngFor="let product of products; let i = index">
  {{ i + 1 }}. {{ product.name }}
</li>

`*ngIf` — Conditional Rendering

*ngIf adds or removes an element from the DOM based on a boolean condition. When the condition is false, the element is completely removed — it does not just become invisible.

<div class="price">
  <!-- Show full price only if there is no discount -->
  <div *ngIf="product.discount === 0">
    ${{ product.price.toFixed(2) }}
  </div>

  <!-- Show discounted price if discount exists -->
  <div *ngIf="product.discount > 0">
    ${{ (product.price * (1 - product.discount)).toFixed(2) }}
    <span class="badge">SALE</span>
  </div>
</div>

`ngIf` with `else`

You can pair *ngIf with an else block using a template reference variable:

<div *ngIf="product.discount === 0; else salePrice">
  ${{ product.price.toFixed(2) }}
</div>

<ng-template #salePrice>
  <div class="sale">
    ${{ (product.price * (1 - product.discount)).toFixed(2) }}
  </div>
</ng-template>

`*ngSwitch` — Multiple Conditions

*ngSwitch is used when you need to switch between multiple views based on a single expression — similar to a JavaScript switch statement.

<div [ngSwitch]="product.category">
  <div *ngSwitchCase="'electronics'">
    Electronics product: {{ product.name }}
  </div>
  <div *ngSwitchCase="'clothing'">
    Clothing item: {{ product.name }}
  </div>
  <div *ngSwitchDefault>
    General product: {{ product.name }}
  </div>
</div>

Directive	Use Case
`*ngFor`	Repeating a section for each item in a collection
`*ngIf`	Showing or hiding elements based on a condition
`*ngSwitch`	Choosing one of several templates based on a value

Combining Directives

ngFor and ngIf are frequently used together to render filtered or conditional lists:

<li *ngFor="let product of products">
  <div *ngIf="product.discount > 0" class="on-sale">
    {{ product.name }} — {{ product.discount * 100 }}% off
  </div>
</li>

Note: placing ngFor and ngIf on the same element is not allowed. Use a wrapper <ng-container> if needed:

<ng-container *ngFor="let product of products">
  <li *ngIf="product.discount > 0">
    {{ product.name }}
  </li>
</ng-container>

Summary

Angular's structural directives are the primary way to control what the user sees based on data. The three core directives cover almost every UI flow control scenario:

*ngFor** — iterate over collections to render repeated UI elements
*ngIf** — conditionally show or hide elements
*ngSwitch** — select one of several template blocks

These directives turn static HTML into a data-driven, reactive user interface.