Structural Directives (ngIf, ngFor, ngSwitch)

Angular Structural Directives Guide

Structural Directives in Angular are used to alter the DOM layout by adding or removing elements. The most common ones are *ngIf, *ngFor, and *ngSwitch.

---

✅ 1. *ngIf – Conditional Rendering

Used to show or hide an element based on a condition.

<p *ngIf="isLoggedIn">Welcome, User!</p>
<p *ngIf="!isLoggedIn">Please log in.</p>

Optional else clause:

<ng-container *ngIf="isLoggedIn; else loginPrompt">
  <p>Welcome back!</p>
</ng-container>
<ng-template #loginPrompt>
  <p>Please sign in.</p>
</ng-template>

---

🔁 2. *ngFor – Iterating Over Lists

Used to repeat an element for each item in a list.

<ul>
  <li *ngFor="let item of items; let i = index">
    {{ i + 1 }}. {{ item }}
  </li>
</ul>

You can also use other local variables like:

• index
• first
• last
• even
• odd

<div *ngFor="let user of users; let even = even">
  <p [class.even-row]="even">{{ user.name }}</p>
</div>

---

🔄 3. *ngSwitch – Multiple Conditions

Used to display one of many possible elements based on a matching value.

<div [ngSwitch]="color">
  <p *ngSwitchCase="'red'">Color is Red</p>
  <p *ngSwitchCase="'blue'">Color is Blue</p>
  <p *ngSwitchDefault>Unknown Color</p>
</div>

---

🧠 Quick Recap

Directive	Purpose
*ngIf	Conditionally show/hide element
*ngFor	Loop through a list
*ngSwitch	Switch between multiple templates based on a condition

---