? Built-in Directives

Angular Templates Structural Directives

? Quick Overview

Angular provides powerful built-in structural directives like *ngIf, *ngFor, and [ngSwitch] to control how elements are added, removed, and repeated in the DOM. These directives help you render UI conditionally, loop over collections, and switch between multiple views based on a value.

? Key Concepts

*ngIf → Conditionally include or remove elements from the DOM based on a Boolean expression.
*ngFor → Repeat a template for each item in a list (arrays, iterables).
[ngSwitch] with *ngSwitchCase & *ngSwitchDefault → Switch view based on a matching value.
Structural directives are prefixed with * because they change the structure of the DOM.

? Syntax & Theory

✨ *ngIf — Conditional Rendering

Use *ngIf when you want to show an element only if a condition is true. When the condition is false, Angular completely removes the element from the DOM.

? View Code Example

// app.component.ts - using *ngIf for login state
export class AppComponent {
  isLoggedIn = true;
}

// app.component.html - show different messages based on isLoggedIn
<p *ngIf="isLoggedIn">Welcome back, user!</p>
<p *ngIf="!isLoggedIn">Please log in.</p>

? Live Output / Explanation

If isLoggedIn is true, only the message "Welcome back, user!" appears in the DOM. If it is false, Angular removes that element and shows "Please log in." instead. Nothing is just hidden; the element is actually created/removed.

? *ngFor — Looping Over Lists

Use *ngFor to repeat a template for every item in a collection. You can also access helpful local variables like index, first, last, odd, and even.

? View Code Example

// app.component.ts - list of fruits
export class AppComponent {
  fruits = ['Apple', 'Banana', 'Cherry'];
}

// app.component.html - render each fruit with its index
<ul>
  <li *ngFor="let fruit of fruits; index as i">{{ i + 1 }}. {{ fruit }}</li>
</ul>

? Live Output / Explanation

The template generates a list like:

1. Apple
2. Banana
3. Cherry

Angular iterates through the fruits array, and for each element it creates an <li> with the current index and fruit name.

? ngSwitch — Multiple View Options

Use [ngSwitch] when you have many possible views and want to display exactly one based on a single expression. It behaves like a switch statement in TypeScript.

? View Code Example

// app.component.ts - track the selected fruit
export class AppComponent {
  selectedFruit = 'Apple';
}

// app.component.html - choose content with ngSwitch
<div [ngSwitch]="selectedFruit">
  <p *ngSwitchCase="'Apple'">You selected Apple</p>
  <p *ngSwitchCase="'Banana'">You selected Banana</p>
  <p *ngSwitchCase="'Cherry'">You selected Cherry</p>
  <p *ngSwitchDefault>Unknown fruit</p>
</div>

? Live Output / Explanation

When selectedFruit is 'Apple', Angular renders only: "You selected Apple". If you change the value to 'Banana', the Banana message appears instead. If the value does not match any case, Angular shows the *ngSwitchDefault content.

? Common Use Cases

*ngIf: Show/hide login buttons, loading spinners, or error messages.
*ngFor: Render lists of products, users, menu items, or notifications.
ngSwitch: Dashboard views, tab-like UIs, and status-based messages (e.g., Pending, Approved, Rejected).

✅ Tips & Best Practices

Use *ngIf for conditional rendering when you want elements completely removed from the DOM (not just hidden).
Prefer *ngIf with else for cleaner templates instead of writing two opposite conditions.
Use *ngFor for dynamic lists, and consider using trackBy for better performance on large lists.
Use ngSwitch when you have multiple mutually exclusive cases instead of many chained *ngIf directives.
Always remember the * prefix for structural directives like *ngIf and *ngFor; forgetting it will cause Angular template errors.

? Try It Yourself

Create a login/logout toggle using *ngIf that shows a "Login" button when logged out and a "Logout" button when logged in.
Render a list of student names using *ngFor with index numbers and highlight the first student.
Build a fruit selector (e.g., using a <select> dropdown) and show the selected fruit message using [ngSwitch].
Extend the ngSwitch example to handle a few more fruits and observe how only one case is active at a time.