Search⌘ K
AI Features
Home
Courses
Directives and Pipes in Angular

Solution: The Built-in `NgIf` Directive

Explore the use of Angular's built-in NgIf directive to implement safe checks in templates that guard against null or undefined values. Learn how to conditionally render elements, display fallback content like 'Unknown' or 'Loading...', and enhance the reliability and readability of your Angular templates.

We'll cover the following...

Solution

Here’s an example of what the solution for this task may look like:

<ul>
  <div *ngIf="userA; else loading">
    <li *ngIf="userA.premium">
      name:
      <span *ngIf="userA.name; else unknown">{{userA.name}}</span>
      , premium: {{userA.premium ? 'Yes' : 'No'}}
    </li>
  </div>
  <div *ngIf="userB">
    <li *ngIf="userB.premium">
      name:
      <span *ngIf="userB.name; else unknown">{{userB.name}}</span>
      , premium: {{userB.premium ? 'Yes' : 'No'}}
    </li>
  </div>
  <div *ngIf="userC">
    <li *ngIf="userC.premium">
      name:
      <span *ngIf="userC.name; else unknown">{{userC.name}}</span>
      , premium: {{userC.premium ? 'Yes' : 'No'}}
    </li>
  </div>
  <div *ngIf="userD">
    <li *ngIf="userD.premium">
      name:
      <span *ngIf="userD.name; else unknown">{{userD.name}}</span>
      , premium: {{userD.premium ? 'Yes' : 'No'}}
    </li>
  </div>
</ul>

<ng-template #loading>Loading...</ng-template>

<ng-template #unknown>Unknown</ng-template>
The task’s solution

Explanation

When it comes to implementing safe checks that guard from possibly null or undefined values in the templates, the situation is straightforward.

Wherever the object’s properties are used, we have to add an ngIf wherever ...