Loading states and error patterns in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Angular component display during data loading?

Consider this Angular standalone component using signals to fetch data asynchronously. What will the user see while the data is loading?

Angular

import { Component, signal, effect } from '@angular/core';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-loading-example',
  standalone: true,
  template: `
    <div *ngIf="loading()">Loading...</div>
    <div *ngIf="error()">Error occurred</div>
    <div *ngIf="!loading() && !error()">Data: {{ data() }}</div>
  `
})
export class LoadingExampleComponent {
  private http = inject(HttpClient);
  loading = signal(true);
  error = signal(false);
  data = signal('');

  constructor() {
    this.http.get<string>('https://api.example.com/data').subscribe({
      next: (res) => {
        this.data.set(res);
        this.loading.set(false);
      },
      error: () => {
        this.error.set(true);
        this.loading.set(false);
      }
    });
  }
}

A The component shows a blank screen until data arrives.

B The text 'Error occurred' is shown immediately and never changes.

C The data is displayed immediately without showing 'Loading...'.

D The text 'Loading...' is shown until data arrives, then the data is displayed.

💡 Hint

Look at the loading signal and how it controls the template display.

The component starts with loading set to true, so it shows 'Loading...'. When data arrives, loading becomes false and the data is shown. If an error occurs, 'Error occurred' is shown instead.

📝 Syntax

intermediate

Which option causes a syntax error in Angular template for loading state?

Identify the Angular template snippet that will cause a syntax error when used to show loading and error states.

Angular

<div *ngIf="loading">Loading...</div>
<div *ngIf="error">Error occurred</div>
<div *ngIf="!loading && !error">Content loaded</div>

A <div *ngIf="loading">Loading...</div>

B <div *ngIf="error">Error occurred</div>

C <div *ngIf="!loading && !error">Content loaded</div>

D <div *ngIf="loading || error">Loading or Error</div>

💡 Hint

Check the syntax for combining conditions inside *ngIf.

Angular templates do not support complex expressions with logical operators like && directly inside *ngIf. You must use a method or a signal that returns a boolean instead.

❓ state_output

advanced

What is the final value of the error signal after this code runs?

Given this Angular component code snippet, what is the value of error() after the HTTP request fails?

Angular

import { Component, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core';

@Component({
  selector: 'app-error-test',
  standalone: true,
  template: `<div *ngIf="error()">Error!</div>`
})
export class ErrorTestComponent {
  private http = inject(HttpClient);
  error = signal(false);

  constructor() {
    this.http.get('https://api.example.com/fail').subscribe({
      next: () => this.error.set(false),
      error: () => this.error.set(true)
    });
  }
}

A false

B true

C undefined

D null

💡 Hint

Consider what happens in the error callback of the subscription.

The HTTP request fails, so the error callback runs and sets the error signal to true.

🔧 Debug

advanced

Why does this Angular component never show the loading message?

Review this Angular component code. The loading message never appears. What is the cause?

Angular

import { Component, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core';

@Component({
  selector: 'app-debug-loading',
  standalone: true,
  template: `
    <div *ngIf="loading()">Loading...</div>
    <div *ngIf="!loading()">Loaded</div>
  `
})
export class DebugLoadingComponent {
  private http = inject(HttpClient);
  loading = signal(false);

  constructor() {
    this.http.get('https://api.example.com/data').subscribe(() => {
      this.loading.set(false);
    });
  }
}

A The loading signal is never set to true, so loading message never shows.

B The template syntax for *ngIf is incorrect and causes a silent failure.

C The HTTP request never completes, so loading stays false.

D The component is missing the OnInit lifecycle hook to start loading.

💡 Hint

Check the initial value of the loading signal and when it changes.

The loading signal starts as false and is never set to true, so the loading message never appears.

🧠 Conceptual

expert

Which pattern best handles loading and error states in Angular with signals?

Choose the best pattern to manage loading and error states in an Angular component using signals and HTTP requests.

A Use separate signals for loading and error, set loading true before request, false after, and error true on failure.

B Use a single signal that holds 'loading', 'error', or 'success' string states and switch template based on it.

C Use only the error signal and assume loading is false until error or data arrives.

D Use a boolean loading signal and ignore error states, showing data or loading only.

💡 Hint

Think about clarity and explicit state management for UI feedback.

Using separate signals for loading and error states is clear and allows the UI to show precise feedback. Setting loading true before the request and false after ensures correct loading display. Setting error true on failure allows error messages.