[Solved] You have a list of users with some having empty names:users = [{name: 'Alice'}, {name: ''}, {name: 'Bob'}, {name: null}];How can you use *ngFor to render only users with a non-empty, non-null name? | Angular

Angular - Directives

You have a list of users with some having empty names:

users = [{name: 'Alice'}, {name: ''}, {name: 'Bob'}, {name: null}];

How can you use *ngFor to render only users with a non-empty, non-null name?

A<code>*ngFor="let user of users" <div *ngIf="user.name">{{ user.name }}</div></code>

B<code>*ngFor="let user of users | filter: user.name"</code>

C<code>*ngFor="let user of users" <div *ngIf="user.name !== ''">{{ user.name }}</div></code>

D<code>*ngFor="let user of users" <ng-container *ngIf="user.name">{{ user.name }}</ng-container></code>

Step-by-Step Solution

Solution:

Step 1: Understand filtering in template
Angular's *ngFor does not support filtering directly. We use *ngIf inside the loop to conditionally show elements.
Step 2: Check conditions for non-empty names
Using *ngIf="user.name" filters out empty strings and null values because they are falsy in Angular templates.
Step 3: Compare options
*ngFor="let user of users" <div *ngIf="user.name">{{ user.name }}</div> correctly uses *ngIf="user.name" inside the loop. *ngFor="let user of users" <ng-container *ngIf="user.name">{{ user.name }}</ng-container> has invalid syntax mixing *ngFor and *ngIf on the same element. *ngFor="let user of users | filter: user.name" uses a non-existent filter pipe. *ngFor="let user of users" <div *ngIf="user.name !== ''">{{ user.name }}</div> misses filtering null values.
Final Answer:
*ngFor="let user of users" <div *ngIf="user.name">{{ user.name }}</div> -> Option A
Quick Check:
Use *ngIf inside *ngFor to filter falsy names = D [OK]

Quick Trick: Use *ngIf inside *ngFor to skip empty or null items [OK]

Common Mistakes:

Master "Directives" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

You have a list of users with some having empty names: