Angular Directives: ngIf, ngFor, ngSwitch Tutorial

In the last lesson, we explored one-way and two-way data binding in Angular, which helps sync data between the component and the view. Now, we’ll dive into Angular directives, a powerful feature that lets you manipulate the DOM and create dynamic web apps. Directives like ngIf, ngFor, and ngSwitch are essential tools for any Angular developer.

In this tutorial, I’ll share my experience of using these directives in a real project. I’ll also walk you through the steps to implement them, with examples and code snippets. By the end, you’ll know how to use ngIf, ngFor, and ngSwitch to build dynamic and responsive Angular apps.

My Use-Case: Building a Dynamic User Dashboard

I once worked on a project where I had to build a user dashboard that displayed different content based on user roles. Some users had access to admin features, while others could only view basic data. I needed a way to show or hide elements dynamically, which is where ngIf came in handy.

For example, I used ngIf to display an “Edit” button only for admin users. For non-admin users, the button was hidden. I also used ngFor to loop through a list of user data and display it in a table. Finally, I used ngSwitch to show different messages based on the user’s subscription plan.

This project taught me how powerful Angular directives can be. They saved me time and made my code cleaner and more efficient. Now, let’s break down how you can use these directives in your own projects.

Using ngIf to Conditionally Display Elements

The ngIf directive is used to add or remove elements from the DOM based on a condition. It’s perfect for scenarios where you want to show or hide content dynamically.

Here’s an example:

<div *ngIf="isAdmin">  
  <button>Edit</button>  
</div>  

In this code, the “Edit” button will only appear if the isAdmin variable is true. If isAdmin is false, the button won’t be added to the DOM.

I used this in my dashboard project to hide admin features from non-admin users. It’s a simple yet effective way to control what users see.

Using ngFor to Loop Through Lists

The ngFor directive is used to loop through a list and display each item. It’s ideal for rendering dynamic content like tables, lists, or grids.

Here’s an example:

<ul>  
  <li *ngFor="let user of users">  
    {{ user.name }}  
  </li>  
</ul>  

In this code, the users array is looped through, and each user’s name is displayed in a list item.

In my project, I used ngFor to display a table of user data. It made the code concise and easy to maintain.

Using ngSwitch to Handle Multiple Conditions

The ngSwitch directive is used to display different content based on multiple conditions. It’s like a switch statement in JavaScript but for your HTML.

Here’s an example:

<div [ngSwitch]="userRole">  
  <p *ngSwitchCase="'admin'">Welcome, Admin!</p>  
  <p *ngSwitchCase="'user'">Welcome, User!</p>  
  <p *ngSwitchDefault>Welcome, Guest!</p>  
</div>  

In this code, the message changes based on the userRole variable. If the role is “admin,” it shows a welcome message for admins. If the role is “user,” it shows a message for users. Otherwise, it shows a default message.

I used ngSwitch in my project to display different messages based on the user’s subscription plan. It was a clean way to handle multiple conditions.

Combining Directives for Advanced Use Cases

You can combine ngIf, ngFor, and ngSwitch to create complex and dynamic UIs. For example, you can use ngFor to loop through a list and ngIf to filter items based on a condition.

Here’s an example:

<ul>  
  <li *ngFor="let user of users">  
    <div *ngIf="user.isActive">  
      {{ user.name }}  
    </div>  
  </li>  
</ul>  

In this code, only active users are displayed in the list. This approach is useful for filtering data before rendering it.

Conclusion

In this tutorial, we explored how to use Angular directives like ngIf, ngFor, and ngSwitch to build dynamic web apps. These directives are powerful tools that let you control the DOM and create responsive UIs.

I shared my experience of using these directives in a real project, where I built a user dashboard with dynamic content. By following the steps and examples in this tutorial, you can start using these directives in your own projects.

If you found this tutorial helpful, check out the next lesson on Template-Driven Forms in Angular. It’s a great way to take your Angular skills to the next level.