[Solved] Given this Angular template snippet:<div *ngIf="error()" role="alert">Error: {{ error() }}</div> <div *ngIf="isLoading()">Loading...</div> <div *ngIf="!isLoading() && !... | Angular

Angular - HTTP Client

Given this Angular template snippet:

<div *ngIf="error()" role="alert">Error: {{ error() }}</div>
<div *ngIf="isLoading()">Loading...</div>
<div *ngIf="!isLoading() && !error()">Data loaded</div>

What will be displayed if isLoading() returns false and error() returns "Network error"?

ALoading...

BError: Network error

CData loaded

DNothing is displayed

Step-by-Step Solution

Solution:

Step 1: Evaluate conditions with given values
isLoading() is false, error() is "Network error" (truthy).
Step 2: Check which *ngIf blocks show
The first div shows if error() is truthy, so it displays "Error: Network error". The second div shows if isLoading() is true (false here), so no. The third div shows if not loading and no error, but error exists, so no.
Final Answer:
Error: Network error -> Option B
Quick Check:
Error present = show error message [OK]

Quick Trick: Error message shows if error() is truthy, regardless of loading [OK]

Common Mistakes:

MISTAKES

Ignoring error() and showing loading
Showing data loaded despite error
Assuming nothing shows when error exists

Master "HTTP Client" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Given this Angular template snippet:

Step 1: Evaluate conditions with given values

Step 2: Check which *ngIf blocks show

Final Answer:

Quick Check:

Want More Practice?