Angular Tutorial: ngIf, ngFor, ngSwitch

Welcome to our Angular tutorial! Today, we're going to dive into three powerful Angular directives: ngIf, ngFor, and ngSwitch. These directives will help you manipulate and control the content of your Angular applications dynamically.

By the end of this tutorial, you'll understand:

What are Angular directives?
How to use ngIf for conditional rendering
How to use ngFor for looping through collections
How to use ngSwitch for multiple conditional rendering

Let's get started!

Angular Directives

Directives are a way to extend the functionality of HTML in Angular. They let you add new attributes, elements, and behavior to HTML. ngIf, ngFor, and ngSwitch are some of the most commonly used directives.

ngIf

💡 Pro Tip: ngIf is used for conditional rendering, meaning it can hide or show HTML elements based on a condition.

html

<div *ngIf="condition">
  This div will be displayed if the condition is true.
</div>

Quiz

Quick Quiz

Question 1 of 1

What does the `*ngIf` directive do?

Example

Let's create a simple example where we show a "Welcome" message if a user is logged in.

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  template: `
    <h1 *ngIf="isLoggedIn">Welcome, User!</h1>
    <h1 *ngIf="!isLoggedIn">Please log in to continue.</h1>
  `
})
export class WelcomeComponent {
  isLoggedIn = false;
}

📝 Note: In the example above, we have created a WelcomeComponent. The isLoggedIn variable determines whether the user is logged in or not. Depending on the value of isLoggedIn, we use *ngIf to show either a "Welcome, User!" or "Please log in to continue." message.

ngFor

💡 Pro Tip: ngFor is used for looping through collections and displaying them in the HTML.

html

<ul>
  <li *ngFor="let item of items">
    {{ item }}
  </li>
</ul>

Quiz

Quick Quiz

Question 1 of 1

What does the `*ngFor` directive do?

Example

Let's create a simple example where we display a list of fruits.

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-fruits',
  template: `
    <ul>
      <li *ngFor="let fruit of fruits">
        {{ fruit }}
      </li>
    </ul>
  `,
})
export class FruitsComponent {
  fruits = ['Apple', 'Banana', 'Orange'];
}

📝 Note: In the example above, we have created a FruitsComponent. We define an array of fruits and use *ngFor to loop through them and display each fruit in an HTML list.

ngSwitch

💡 Pro Tip: ngSwitch is used for multiple conditional rendering based on different possible values.

html

<div [ngSwitch]="status">
  <div *ngSwitchCase="'success'">Success!</div>
  <div *ngSwitchCase="'error'">Error!</div>
  <div *ngSwitchDefault>Unknown status.</div>
</div>

Quiz

Quick Quiz

Question 1 of 1

What does the `[ngSwitch]` directive do?

Example

Let's create a simple example where we display a message based on a status.

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-status',
  template: `
    <div [ngSwitch]="status">
      <div *ngSwitchCase="'success'">Success!</div>
      <div *ngSwitchCase="'error'">Error!</div>
      <div *ngSwitchDefault>Unknown status.</div>
    </div>
  `,
})
export class StatusComponent {
  status = 'success';
}

📝 Note: In the example above, we have created a StatusComponent. We use [ngSwitch] to switch between different HTML elements based on the value of status. Depending on the value of status, the appropriate message will be displayed.

That's it for today! You've learned how to use ngIf, ngFor, and ngSwitch in Angular. These directives will help you manipulate and control the content of your Angular applications dynamically. Happy coding! 🎯