Service-based state management in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to inject the service into the component constructor.

Angular

constructor(private [1]: CounterService) {}

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

AserviceCounter

Bcounter

CCounterService

DcounterService

Attempts:

3 left

💡 Hint

Common Mistakes

Using the service class name directly instead of a variable name.

Using unrelated variable names.

In Angular, services are injected using a variable name with camelCase, usually the service class name starting with lowercase.

2fill in blank

medium

Complete the code to call the increment method from the service on button click.

Angular

<button (click)="[1].increment()">Increase</button>

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

Aincrement

BCounterService

CcounterService

Dservice

Attempts:

3 left

💡 Hint

Common Mistakes

Using the service class name instead of the instance variable.

Calling the method directly without the service instance.

The service instance variable is used to call methods, not the class name.

3fill in blank

hard

Fix the error in the service method to update the count correctly.

Angular

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

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

A+=

B-=

C==

D=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '=' which assigns but does not add.

Using '==' which is a comparison operator.

The '+=' operator adds 1 to the current count value.

4fill in blank

hard

Fill both blanks to create a getter that returns the current count from the service.

Angular

get currentCount() {
  return this.[1].[2];
}

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

AcounterService

Bcount

Cservice

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the service class name instead of the instance variable.

Using incorrect property names.

The getter accesses the count property from the injected service instance.

5fill in blank

hard

Fill all three blanks to create a service method that resets count to zero and emits the new value.

Angular

reset() {
  this.[1] = [2];
  this.[3].next(this.count);
}

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

Acount

B0

CcountChanged

DresetCount

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong property names for count or the subject.

Assigning count to a string instead of zero.

The method sets count to zero and emits the updated count via the countChanged subject.

Practice

1. What is the main benefit of using a service for state management in Angular?

easy

A. It allows sharing state easily across multiple components.

B. It automatically updates the UI without any coding.

C. It replaces the need for components entirely.

D. It makes the app run faster by skipping change detection.

Solution

1. Step 1: Understand service role in Angular

   Services hold data and logic separate from components.

2. Step 2: Recognize state sharing benefit

   Services can be injected into many components, sharing the same state instance.

3. Final Answer:

   It allows sharing state easily across multiple components. -> Option A

4. Quick Check:

   Service-based state management = shared state [OK]

Hint: Services share data across components easily [OK]

Common Mistakes:

• Thinking services replace components
• Believing services auto-update UI without code
• Assuming services speed up app by skipping detection

2. Which decorator and property make an Angular service a singleton across the app?

easy

A. @NgModule({ providers: [] })

B. @Component({ selector: 'app-root' })

C. @Directive({ selector: '[appService]' })

D. @Injectable({ providedIn: 'root' })

Solution

1. Step 1: Identify Angular service decorator

   @Injectable marks a class as a service for dependency injection.

2. Step 2: Understand providedIn property

   Setting providedIn: 'root' makes the service a singleton app-wide.

3. Final Answer:

   @Injectable({ providedIn: 'root' }) -> Option D

4. Quick Check:

   Singleton service = @Injectable with providedIn root [OK]

Hint: Use @Injectable({ providedIn: 'root' }) for singleton services [OK]

Common Mistakes:

• Confusing @Component with service decorator
• Using @NgModule providers without providedIn
• Mistaking @Directive for service declaration

3. Given this service code, what will the console log after calling increment() twice?

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

@Injectable({ providedIn: 'root' })
export class CounterService {
  count = signal(0);

  increment() {
    this.count.update(c => c + 1);
  }
}

const service = new CounterService();
service.increment();
service.increment();
console.log(service.count());

medium

A. 1

B. 0

C. 2

D. undefined

Solution

1. Step 1: Understand initial signal value

   The signal count starts at 0.

2. Step 2: Apply two increments

   Each increment adds 1, so after two calls, count is 2.

3. Final Answer:

   2 -> Option C

4. Quick Check:

   0 + 1 + 1 = 2 [OK]

Hint: Each update adds 1; two calls add 2 total [OK]

Common Mistakes:

• Forgetting to call the signal as a function to get value
• Assuming count resets after each increment
• Confusing update with set method

4. What is wrong with this Angular service code for state management?

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

@Injectable()
export class DataService {
  data = signal([]);

  addItem(item: string) {
    this.data().push(item);
  }
}

medium

A. The service is missing providedIn: 'root' for singleton scope.

B. The signal value is mutated directly, which breaks reactivity.

C. The addItem method should return the updated array.

D. The signal should be initialized with null, not an empty array.

Solution

1. Step 1: Check signal mutation method

   The code calls this.data() to get the array, then pushes directly.

2. Step 2: Understand signal immutability

   Directly mutating the array breaks Angular's reactivity; must use update() or set() to replace value.

3. Final Answer:

   The signal value is mutated directly, which breaks reactivity. -> Option B

4. Quick Check:

   Mutate signal value immutably to keep reactivity [OK]

Hint: Never mutate signal value directly; use update or set [OK]

Common Mistakes:

• Ignoring providedIn for singleton scope
• Expecting addItem to return value
• Thinking null is better initial value than []

5. You want to share a list of tasks across components using a service with Angular signals. Which approach correctly updates the tasks list immutably when adding a new task?

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

@Injectable({ providedIn: 'root' })
export class TaskService {
  tasks = signal([]);

  addTask(newTask: string) {
    // Which line correctly updates tasks?
  }
}

hard

A. this.tasks.set([...this.tasks(), newTask]);

B. this.tasks = signal([...this.tasks(), newTask]);

C. this.tasks().push(newTask);

D. this.tasks.update(tasks => { tasks.push(newTask); return tasks; });

Solution

1. Step 1: Understand immutable update with signals

   Signals require replacing the value immutably to trigger updates.

2. Step 2: Analyze options for correct update

   this.tasks.set([...this.tasks(), newTask]); uses set() with a new array including the new task, which is correct.

3. Final Answer:

   this.tasks.set([...this.tasks(), newTask]); -> Option A

4. Quick Check:

   Immutable update with set() = correct pattern [OK]

Hint: Use set() with new array copy to update signals immutably [OK]

Common Mistakes:

• Mutating array inside update without returning new array
• Directly pushing to signal value
• Reassigning signal variable instead of updating value