Why design patterns matter in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a standalone Angular component.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `<h1>Hello, Angular!</h1>`,
  standalone: [1]
})
export class HelloComponent {}

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

Afalse

Btrue

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Setting standalone to false or omitting it causes the component to require an NgModule.

Using null or undefined is invalid for this property.

The standalone: true flag makes the component standalone, which is a modern Angular pattern for simpler module management.

2fill in blank

medium

Complete the code to inject a service using Angular's new inject() function.

Angular

import { Component, inject } from '@angular/core';
import { LoggerService } from './logger.service';

@Component({
  selector: 'app-log',
  template: `<p>Check console for logs</p>`,
  standalone: true
})
export class LogComponent {
  logger = [1](LoggerService);

  constructor() {
    this.logger.log('Component created');
  }
}

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

Ainject

Bnew

CuseService

Dprovide

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'new' to create a service instance bypasses Angular's dependency injection.

Using 'useService' or 'provide' are not valid functions here.

The inject() function is the modern way to get a service instance inside a component or function without constructor injection.

3fill in blank

hard

Fix the error in the Angular signal usage to track a counter value.

Angular

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

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

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

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

AcreateSignal

BuseSignal

Csignal

DSignal

Attempts:

3 left

💡 Hint

Common Mistakes

Using capitalized 'Signal' causes a runtime error.

Using 'useSignal' or 'createSignal' are not Angular functions.

The signal function creates a reactive signal in Angular. It must be lowercase and imported from '@angular/core'.

4fill in blank

hard

Fill both blanks to create a reactive effect that logs count changes.

Angular

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

@Component({
  selector: 'app-reactive-log',
  template: `<button (click)="increment()">Count: {{ count() }}</button>`,
  standalone: true
})
export class ReactiveLogComponent {
  count = signal(0);

  constructor() {
    effect(() => {
      console.log('Count is', [1]());
    });
  }

  increment() {
    this.count.[2](this.count() + 1);
  }
}

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

Acount

Bset

Cupdate

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' or 'update' instead of 'set' to change the signal value.

Not calling the signal as a function inside the effect.

The effect runs a function that accesses the signal count() to track changes. To update the signal, use set.

5fill in blank

hard

Fill all three blanks to create a standalone Angular component with a signal and effect that updates a message.

Angular

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

@Component({
  selector: 'app-message',
  template: `<p>{{ message() }}</p><button (click)="changeMessage()">Change</button>`,
  standalone: [1]
})
export class MessageComponent {
  message = signal('Hello');

  constructor() {
    effect(() => {
      console.log('Message:', [2]());
    });
  }

  changeMessage() {
    this.message.[3]('Hi there!');
  }
}

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

Atrue

Bmessage

Cset

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting standalone to false or omitting it.

Not calling the signal as a function inside the effect.

Using wrong method like 'update' instead of 'set' to change the signal.

The component must be standalone (true). The effect accesses the signal message(). To update the signal, use set.