Computed signals for derived values in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a computed signal that derives the full name.

Angular

import { computed, signal } from '@angular/core';

const firstName = signal('John');
const lastName = signal('Doe');

const fullName = computed(() => [1]);

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

AfirstName + lastName

BfirstName + ' ' + lastName

CfirstName() + ' ' + lastName()

DfirstName() + lastName()

Attempts:

3 left

💡 Hint

Common Mistakes

Using signals without parentheses, which returns the signal object instead of its value.

Concatenating without a space between names.

The computed signal must call the signals as functions to get their current values. So firstName() and lastName() are used, concatenated with a space.

2fill in blank

medium

Complete the code to create a computed signal that returns the length of the full name.

Angular

const fullNameLength = computed(() => [1]);

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

AfullName.size

BfullName().length

CfullName().size

DfullName.length

Attempts:

3 left

💡 Hint

Common Mistakes

Accessing length without calling the signal as a function.

Using size instead of length.

To get the length of the string value from a computed signal, you must call it as a function first, then access length.

3fill in blank

hard

Fix the error in the computed signal that tries to uppercase the full name.

Angular

const upperName = computed(() => [1]);

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

AfullName().toUpperCase()

BfullName().toUpperCase

CfullName.toUpperCase

DfullName.toUpperCase()

Attempts:

3 left

💡 Hint

Common Mistakes

Not calling the signal as a function.

Missing parentheses on toUpperCase method.

The computed signal must be called as a function to get the string value, then toUpperCase() is called as a method.

4fill in blank

hard

Fill both blanks to create a computed signal that returns the initials of the full name.

Angular

const initials = computed(() => [1] + [2]);

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

AfirstName().charAt(0).toUpperCase()

BlastName().charAt(0)

ClastName().charAt(0).toUpperCase()

DfirstName().charAt(0)

Attempts:

3 left

💡 Hint

Common Mistakes

Not calling signals as functions.

Forgetting to uppercase the initials.

To get initials, take the first character of each name, call toUpperCase() on them, and concatenate.

5fill in blank

hard

Fill all three blanks to create a computed signal that returns the full name in 'Last, First' format.

Angular

const formattedName = computed(() => [1] + ', ' + [2]);

// Also create a signal for greeting
const greeting = signal('Hello');

const welcomeMessage = computed(() => [3] + ' ' + formattedName());

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

AlastName()

BfirstName()

Cgreeting()

DfullName()

Attempts:

3 left

💡 Hint

Common Mistakes

Using fullName() instead of lastName() and firstName() separately.

Not calling greeting() as a function.

The formatted name uses last name, then first name separated by a comma. The welcome message combines the greeting signal with the formatted name.