Explain the ngIf, ngFor and ngSwitch directives

ngIf and ngFor are structural directives, which add or remove elements in the DOM. ngSwitch is an attribute directive that works with the structural ngSwitchCase and ngSwitchDefault.

*ngIf includes or removes an element based on a condition, with an optional else template.

<div *ngIf="isVisible">This will show conditionally</div>
<div *ngIf="user; else noUser">Welcome {{user.name}}</div>
<ng-template #noUser>Please log in</ng-template>

*ngFor repeats an element for each item in a collection. index as i exposes the position. trackBy tells Angular how to match items when the list changes, so it can reuse their DOM elements.

<li *ngFor="let item of items; index as i; trackBy: trackByFn">
  {{i}}: {{item.name}}
</li>

ngSwitch displays one element out of several. You bind it as [ngSwitch] on a container. Each *ngSwitchCase child renders only when its value matches, and *ngSwitchDefault renders when none does.

<div [ngSwitch]="condition">
  <p *ngSwitchCase="'A'">Case A</p>
  <p *ngSwitchCase="'B'">Case B</p>
  <p *ngSwitchDefault>Default case</p>
</div>

All three have been deprecated since Angular 20 in favor of the built-in control flow blocks @if, @for and @switch. A @for block takes a track expression that identifies each item, so it can reuse views.

@if (user) {
  <div>Welcome {{user.name}}</div>
} @else {
  <p>Please log in</p>
}
@for (item of items; track item.id; let i = $index) {
  <li>{{i}}: {{item.name}}</li>
}