Loading states and error patterns in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a loading signal in Angular.

Angular

const loading = [1](false);

Drag options to blanks, or click blank then click option'

AuseState

Bsignal

Cinject

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using React's useState instead of Angular's signal.

Trying to use inject for creating signals.

In Angular signals, signal creates a reactive value to track loading state.

2fill in blank

medium

Complete the code to show a loading message only when loading is true.

Angular

<div *ngIf="[1]">Loading...</div>

Drag options to blanks, or click blank then click option'

Aloading.get()

Bloading

Cloading()

Dloading.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using loading without parentheses, which is the signal function itself.

Trying to access a .value property which does not exist on signals.

Signals in Angular are functions, so to get the current value, call loading().

3fill in blank

hard

Fix the error in the code to update the loading signal to true.

Angular

loading[1](true);

Drag options to blanks, or click blank then click option'

A()

B.update

C.value

D.set

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the signal like loading(true), which reads the value.

Trying loading.value = true, signals don't have .value.

In Angular, use the set method on signals to update their value: loading.set(true).

4fill in blank

hard

Fill both blanks to create an error signal and set it to a message.

Angular

const error = [1](null);
error[2]('Failed to load data');

Drag options to blanks, or click blank then click option'

Asignal

B.set

C.value

Dinject

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call error('message') directly.

Using error.value = 'message'.

Use signal(null) to create the error signal, then update it with error.set('message').

5fill in blank

hard

Fill all three blanks to create a loading state, error state, and reset both.

Angular

const loading = [1](false);
const error = [2](null);
function reset() {
  loading[3](false);
  error.set(null);
}

Drag options to blanks, or click blank then click option'

Asignal

Binject

C.set

D.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using inject instead of signal to create reactive values.

Trying to call loading(false) instead of loading.set(false).

Create both loading and error as signals with signal(). Reset loading by calling loading.set(false).