Loading states and error patterns in Angular - Step-by-Step Execution

Concept Flow - Loading states and error patterns

Component Initialized

↓

Start Data Fetch

↓

Show Loading State

↓

Data Fetch Result

↓

Success

↓

Show Data

↓

User Action?

↓

Retry or End Process

This flow shows how an Angular component starts fetching data, shows a loading state, then either displays data on success or an error message on failure, allowing retry.

Execution Sample

Angular

const dataSignal = signal(null);
const loadingSignal = signal(false);
const errorSignal = signal(null);

function fetchData() {
  loadingSignal.set(true);
  errorSignal.set(null);
  fetch('/api/data')
    .then(res => res.json())
    .then(data => {
      dataSignal.set(data);
      loadingSignal.set(false);
    })
    .catch(err => {
      errorSignal.set('Failed to load');
      loadingSignal.set(false);
    });
}

This Angular code uses signals to track loading, data, and error states during a fetch call.

Execution Table

Step	Action	loadingSignal	errorSignal	dataSignal	UI State
1	Call fetchData()	true	null	null	Show loading spinner
2	Fetch starts	true	null	null	Show loading spinner
3	Fetch success response received	true	null	data object	Still loading spinner (waiting to update)
4	Set dataSignal with data	true	null	data object	Still loading spinner
5	Set loadingSignal to false	false	null	data object	Show data content
6	User triggers fetchData() again	true	null	data object	Show loading spinner
7	Fetch fails	true	null	data object	Show loading spinner
8	Set errorSignal to 'Failed to load'	true	'Failed to load'	data object	Show error message
9	Set loadingSignal to false	false	'Failed to load'	data object	Show error message
10	User retries fetchData()	true	null	data object	Show loading spinner

💡 Loading ends when loadingSignal is false; errorSignal shows error or null; dataSignal holds data or null.

Variable Tracker

Variable	Start	After Step 1	After Step 5	After Step 8	After Step 9	After Step 10
loadingSignal	false	true	false	true	false	true
errorSignal	null	null	null	'Failed to load'	'Failed to load'	null
dataSignal	null	null	data object	data object	data object	data object

Key Moments - 3 Insights

Why does the loading spinner show even after data is received but before loadingSignal is set to false?

Because loadingSignal remains true until explicitly set to false (see steps 3-5 in execution_table), the UI shows loading spinner until loadingSignal changes.

Why is errorSignal reset to null when fetchData is called again?

To clear previous errors and show fresh loading state, errorSignal is reset at fetch start (step 1 and 10), so old errors don't persist.

What happens if loadingSignal is never set to false after fetch?

The UI would keep showing the loading spinner indefinitely, blocking data or error display (see exit_note and step 5).

Visual Quiz - 3 Questions

Look at the execution_table at step 5, what is the UI state?

A Show data content

B Show loading spinner

C Show error message

D Show nothing

💡 Hint

Check the UI State column at step 5 in execution_table.

At which step does errorSignal get set to 'Failed to load'?

A Step 7

B Step 8

C Step 9

D Step 10

💡 Hint

Look at errorSignal column changes in execution_table rows.

If loadingSignal was not set to false after fetch success, what would the UI show?

A Show data content

B Show error message

C Show loading spinner

D Show nothing

💡 Hint

Refer to key_moments about loadingSignal controlling spinner visibility.

Concept Snapshot

Loading states and error patterns in Angular:
- Use signals to track loading, error, and data states.
- Set loading true before fetch, false after.
- Reset error before fetch.
- Show spinner when loading is true.
- Show error message if errorSignal is set.
- Show data when loading is false and no error.

Full Transcript

This Angular example shows how to manage loading and error states using signals. When fetchData is called, loadingSignal is set to true and errorSignal reset to null. The UI shows a loading spinner. On success, dataSignal is set with data and loadingSignal set to false, showing data content. On failure, errorSignal is set with an error message and loadingSignal set to false, showing the error message. Retrying resets errorSignal and loadingSignal to true again. This pattern helps users see clear feedback during data loading and errors.

Practice

1. What is the main purpose of showing a loading state in an Angular component?

easy

A. To automatically refresh the page after loading

B. To hide the entire component until data is loaded

C. To disable all user interactions permanently

D. To inform the user that data is being fetched and they should wait

Solution

1. Step 1: Understand loading state purpose

   Loading states are used to show users that data is being fetched and they need to wait.

2. Step 2: Analyze options

   Only "To inform the user that data is being fetched and they should wait" correctly describes this purpose. The other options describe incorrect or unrelated behaviors.

3. Final Answer:

   To inform the user that data is being fetched and they should wait -> Option D

4. Quick Check:

   Loading state = Inform user to wait [OK]

Hint: Loading states tell users to wait, not hide or disable [OK]

Common Mistakes:

• Thinking loading hides the component completely
• Assuming loading refreshes the page
• Believing loading disables all interactions permanently

2. Which Angular syntax correctly shows a loading message only when isLoading signal is true?

easy

A. <div *ngIf="isLoading()">Loading...</div>

B. <div *ngIf="isLoading">Loading...</div>

C. <div *ngIf="isLoading = true">Loading...</div>

D. <div *ngIf="isLoading == false">Loading...</div>

Solution

1. Step 1: Understand Angular signals usage

   Signals are functions, so to get their value, you call them like isLoading().

2. Step 2: Check each option

   <div *ngIf="isLoading()">Loading...</div> correctly calls isLoading(). <div *ngIf="isLoading">Loading...</div> treats it as a property, which is incorrect for signals. <div *ngIf="isLoading = true">Loading...</div> uses assignment inside *ngIf, which is invalid. <div *ngIf="isLoading == false">Loading...</div> checks for false, which is opposite of loading.

3. Final Answer:

   <div *ngIf="isLoading()">Loading...</div> -> Option A

4. Quick Check:

   Call signals with () in *ngIf [OK]

Hint: Call signals as functions with () inside *ngIf [OK]

Common Mistakes:

• Using signal name without ()
• Trying to assign inside *ngIf
• Checking wrong boolean condition

3. 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"?

medium

A. Loading...

B. Error: Network error

C. Data loaded

D. Nothing is displayed

Solution

1. Step 1: Evaluate conditions with given values

   isLoading() is false, error() is "Network error" (truthy).

2. 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.

3. Final Answer:

   Error: Network error -> Option B

4. Quick Check:

   Error present = show error message [OK]

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

Common Mistakes:

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

4. Identify the error in this Angular component code snippet handling loading and error states:

export class DataComponent {
  isLoading = signal(false);
  error = signal(null);

  fetchData() {
    this.isLoading = true;
    fetch('/api/data')
      .then(() => this.isLoading = false)
      .catch(err => this.error = err.message);
  }
}

medium

A. fetchData does not set error to null before fetching

B. Missing async keyword on fetchData method

C. Signals are reassigned instead of updating their value

D. No return statement in fetchData

Solution

1. Step 1: Understand how to update signals

   Signals are objects with a method to update their value, not variables to reassign.

2. Step 2: Check code for signal updates

   The code does this.isLoading = true which reassigns the signal variable instead of calling this.isLoading.set(true). Same for error.

3. Final Answer:

   Signals are reassigned instead of updating their value -> Option C

4. Quick Check:

   Update signals with .set(), not reassignment [OK]

Hint: Use .set() to update signals, not direct assignment [OK]

Common Mistakes:

• Assigning signals directly instead of using .set()
• Forgetting to reset error before fetch
• Assuming async needed without await

5. You want to show a loading spinner while data loads, an error message if loading fails, and the data content otherwise. Which Angular template pattern correctly handles these states using signals isLoading(), error(), and data()?

hard

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

B. <div *ngIf="!isLoading()">Loading spinner...</div>
<div *ngIf="error()">Error: {{ error() }}</div>
<div *ngIf="data()">{{ data() }}</div>

C. <div *ngIf="error()">Loading spinner...</div>
<div *ngIf="isLoading()">Error: {{ error() }}</div>
<div *ngIf="data()">{{ data() }}</div>

D. <div *ngIf="data()">Loading spinner...</div>
<div *ngIf="isLoading()">Error: {{ error() }}</div>
<div *ngIf="error()">{{ data() }}</div>

Solution

1. Step 1: Understand state priorities

   Loading state should show spinner first, then error if exists, then data if no loading or error.

2. Step 2: Analyze each template option

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

   correctly shows loading when isLoading() is true, error message if error() is truthy, and data only if not loading and no error. The other options mix conditions incorrectly or show wrong messages for states.

3. Final Answer:

   <pre><div *ngIf="isLoading()">Loading spinner...</div> <div *ngIf="error()" role="alert">Error: {{ error() }}</div> <div *ngIf="!isLoading() && !error()">{{ data() }}</div></pre> -> Option A

4. Quick Check:

   Loading > Error > Data display order [OK]

Hint: Show loading first, then error, then data with *ngIf [OK]

Common Mistakes:

• Showing data while still loading
• Displaying error message incorrectly
• Mixing up *ngIf conditions order