Signal-based components in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a signal with initial value 0.

Angular

const count = signal([1]);

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

A0

B''

Cundefined

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using null or undefined as initial value causes unexpected behavior.

Leaving the initial value empty causes errors.

The signal function creates a reactive value. Here, initializing it with 0 sets the starting count.

2fill in blank

medium

Complete the code to update the signal value by adding 1.

Angular

count.set(count.[1]() + 1);

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

Aread

Bvalue

Ccurrent

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using value property which does not exist.

Using read or current which are invalid.

The get() method reads the current value of a signal.

3fill in blank

hard

Fix the error in the component to inject the signal correctly.

Angular

import { Component, [1] } from '@angular/core';

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

AinjectSignal

Binject

CuseSignal

DsignalInject

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent functions like injectSignal or signalInject.

Confusing with hooks or other framework methods.

The inject function is used to inject dependencies in Angular standalone components.

4fill in blank

hard

Fill both blanks to create a signal and update it on button click.

Angular

const clicks = [1](0);

function onClick() {
  clicks.[2](clicks.get() + 1);
}

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

Asignal

Bset

Cupdate

DcreateSignal

Attempts:

3 left

💡 Hint

Common Mistakes

Using update instead of set to change signal value.

Using createSignal which is not an Angular function.

signal creates the reactive value, and set updates it.

5fill in blank

hard

Fill all three blanks to create a standalone component with a signal and display its value.

Angular

import { Component, [1] } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `<button (click)="increment()">Clicked [2] times</button>`
})
export class CounterComponent {
  count = [3](0);

  increment() {
    this.count.set(this.count.get() + 1);
  }
}

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

Asignal

Bcount

Dinject

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing import names or variable names.

Not matching the variable name in template and class.

signal is imported from '@angular/core', count is the signal variable used in the template, and signal creates the reactive value.