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.

Practice

1. Why are design patterns important in Angular development?

easy

A. They automatically generate UI components without coding.

B. They make the app run faster by optimizing CPU usage.

C. They provide tested solutions to common problems, making code easier to maintain.

D. They replace the need for services and modules.

Solution

1. Step 1: Understand the purpose of design patterns

   Design patterns offer proven ways to solve common coding challenges, improving code quality.

2. Step 2: Relate to Angular app maintenance

   Using patterns helps keep Angular apps organized and easier to read and maintain over time.

3. Final Answer:

   They provide tested solutions to common problems, making code easier to maintain. -> Option C

4. Quick Check:

   Design patterns = tested solutions [OK]

Hint: Design patterns solve common problems simply [OK]

Common Mistakes:

• Thinking patterns speed up app performance directly
• Believing patterns auto-generate UI
• Confusing patterns with Angular modules

2. Which of the following is the correct way to implement a Singleton pattern in Angular?

easy

A. Declare variables inside ngOnInit() to keep them unique.

B. Create multiple instances of a component manually.

C. Use @Input() to share data between components.

D. Use a service with providedIn: 'root' to ensure a single instance.

Solution

1. Step 1: Recall Singleton pattern meaning

   Singleton means only one instance of a class exists throughout the app.

2. Step 2: Identify Angular way to create single instance

   Angular services with providedIn: 'root' are singletons by default.

3. Final Answer:

   Use a service with providedIn: 'root' to ensure a single instance. -> Option D

4. Quick Check:

   Singleton in Angular = service with providedIn root [OK]

Hint: Singleton = service with providedIn root [OK]

Common Mistakes:

• Thinking components are singletons by default
• Using @Input() for singleton behavior
• Declaring variables inside lifecycle hooks for singleton

3. Consider this Angular service using the Observer pattern:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataService {
  private dataSubject = new Subject<string>();
  data$ = this.dataSubject.asObservable();

  updateData(newData: string) {
    this.dataSubject.next(newData);
  }
}

What happens when updateData('Hello') is called?

medium

A. The data is stored but not sent to subscribers.

B. All subscribers to data$ receive the string 'Hello'.

C. Nothing happens until subscribe() is called inside updateData.

D. The service throws an error because Subject is private.

Solution

1. Step 1: Understand Subject and Observable

   Subject allows emitting values to all subscribers via next().

2. Step 2: Analyze updateData method

   Calling next('Hello') sends 'Hello' to all subscribers of data$ observable.

3. Final Answer:

   All subscribers to data$ receive the string 'Hello'. -> Option B

4. Quick Check:

   Subject.next() notifies subscribers [OK]

Hint: Subject.next() sends data to all subscribers [OK]

Common Mistakes:

• Confusing private property with access restrictions on next()
• Thinking subscribe() must be inside updateData
• Believing data is stored without notifying subscribers

4. This Angular code tries to implement the Observer pattern but has a bug:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LoggerService {
  private logSubject = new Subject<string>();
  log$ = this.logSubject.asObservable();

  logMessage(message: string) {
    this.logSubject.next;
  }
}

What is the bug and how to fix it?

medium

A. The method calls next without parentheses; fix by adding ().

B. The Subject should be public, not private.

C. The service should not use Subject but BehaviorSubject.

D. The @Injectable decorator is missing a providedIn property.

Solution

1. Step 1: Identify the incorrect method call

   The code uses this.logSubject.next; which does not call the function.

2. Step 2: Correct the method call syntax

   It should be this.logSubject.next(message); with parentheses and argument.

3. Final Answer:

   The method calls next without parentheses; fix by adding (). -> Option A

4. Quick Check:

   Method call needs parentheses [OK]

Hint: Method calls need () to execute [OK]

Common Mistakes:

• Ignoring missing parentheses on method calls
• Changing Subject visibility unnecessarily
• Replacing Subject with BehaviorSubject without reason

5. You want to design an Angular app where multiple components react to user login status changes instantly. Which design pattern best fits this need and why?

hard

A. Observer pattern, because it lets components subscribe and react to login status updates.

B. Singleton pattern, because it creates multiple instances of login components.

C. Factory pattern, because it generates new login forms dynamically.

D. Decorator pattern, because it styles the login button differently.

Solution

1. Step 1: Understand the problem context

   Multiple components need to react instantly when login status changes.

2. Step 2: Match design pattern to behavior

   The Observer pattern allows components to subscribe to changes and update automatically.

3. Step 3: Evaluate other options

   Singleton ensures single instance but doesn't handle event updates; Factory creates objects; Decorator changes appearance.

4. Final Answer:

   Observer pattern, because it lets components subscribe and react to login status updates. -> Option A

5. Quick Check:

   Observer = subscribe and react to changes [OK]

Hint: Observer pattern = react to changes instantly [OK]

Common Mistakes:

• Confusing Singleton with event notification
• Using Factory for event handling
• Thinking Decorator changes behavior, not style