16. Structural directives (ngIf, ngIf-else, ngSwitch, and ngFor)

1. ngIf Directive

The ngIf directive is used to conditionally include or exclude elements in the DOM based on an expression. If the condition evaluates to true, the element is added to the DOM; otherwise, it is removed completely, along with its child elements.

Example 1 (ngIf):

export class DirComponent implements OnInit {
  public display = true;  // property
 
  constructor() {}
 
  ngOnInit(): void {}
}

In the HTML:

<h2 *ngIf="display">Hello</h2>

• Explanation: If the display property is true, the <h2> element is rendered; if false, the <h2> is removed from the DOM.

Note: ngIf doesn’t just hide the element—it removes it entirely from the DOM.

---

2. ngIf-else Directive

The ngIf directive can also be combined with an else clause to specify an alternative template when the condition is false.

Example 2 (ngIf-else):

export class DirComponent implements OnInit {
  public display = true;  // property
 
  constructor() {}
 
  ngOnInit(): void {}
}

In the HTML:

<h2 *ngIf="display; else elsePart">Hello</h2>
 
<ng-template #elsePart>
  <h2>Hello 2</h2>
</ng-template>

• Explanation: If display is true, it displays “Hello”. If false, it will render the content inside the <ng-template> with the #elsePart reference.

Alternatively, you can use then and else for more control over the conditional rendering:

<h2 *ngIf="display; then ifPart; else elsePart"></h2>
 
<ng-template #ifPart>
  <h2>Hello 2</h2>
</ng-template>
 
<ng-template #elsePart>
  <h2>Hello 3</h2>
</ng-template>

---

3. ngSwitch Directive

The ngSwitch directive works similarly to a switch statement in JavaScript. It is used to conditionally render different elements based on the value of an expression.

Example 3 (ngSwitch):

export class DirComponent implements OnInit {
  public pizza = 'pizza';  // property
 
  constructor() {}
 
  ngOnInit(): void {}
}

In the HTML:

<div [ngSwitch]="pizza">
  <div *ngSwitchCase="'burger'">You like Burger</div>
  <div *ngSwitchCase="'pizza'">You like Pizza</div>
  <div *ngSwitchDefault>You like something else</div>
</div>

• Explanation: The value of pizza determines which case gets rendered. If it is 'pizza', the second <div> will be displayed. If none of the cases match, the ngSwitchDefault case will render.

---

4. ngFor Directive

The ngFor directive is used to loop over an array and render an element for each item in the collection. It can also be used with index tracking and object properties.

Example 4 (ngFor):

export class DirComponent implements OnInit {
  public fruits = ["Apple", "Banana", "Cherry"];  // Array of fruits
  public persons = [
    { name: "John", age: 24, isMarried: true },
    { name: "Jane", age: 30, isMarried: false },
  ];  // Array of persons
 
  constructor() {}
 
  ngOnInit(): void {}
}

In the HTML:

<div *ngFor="let fruit of fruits; index as i">
  <h2>{{i}} {{fruit}}</h2>
</div>
 
<div *ngFor="let p of persons; index as i">
  <h2>{{i}} {{p.name}}</h2>
  <h2>{{i}} {{p.age}}</h2>
  <h2>{{i}} {{p.isMarried}}</h2>
</div>

• Explanation: For each fruit, the ngFor renders the <h2> element displaying the index and fruit name. Similarly, for each person, the name, age, and marriage status are displayed.

---

5. Nested ngFor Loop

You can also nest ngFor loops to iterate over multiple arrays or objects. This is useful when working with nested structures, such as arrays of objects with arrays inside them.

Example 5 (Nested ngFor):

export class DirComponent implements OnInit {
  public fruits = ["Apple", "Banana", "Orange"];  // Array of fruits
 
  public persons = [
    { name: "John", age: 24, isMarried: true, hobbies: ["Reading", "Swimming"] },
    { name: "Jane", age: 30, isMarried: false, hobbies: ["Cooking", "Cycling"] },
  ];  // Array of persons with hobbies
 
  constructor() {}
 
  ngOnInit(): void {}
}

In the HTML:

<div *ngFor="let fruit of fruits; index as i">
  <h2>{{i}} {{fruit}}</h2>
</div>
 
<div *ngFor="let p of persons; index as i">
  <h2>{{i}} {{p.name}}</h2>
  <h2>{{i}} {{p.age}}</h2>
  <h2>{{i}} {{p.isMarried}}</h2>
  <div *ngFor="let hobby of p.hobbies">
    <li>{{hobby}}</li>
  </div>
</div>

• Explanation: The outer ngFor loops through the persons array, and for each person, another ngFor is used to loop through their hobbies array, displaying each hobby in a <li> element.