Service-based state management in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is service-based state management in Angular?

It is a way to keep and share data across components using Angular services. Services hold the state and provide methods to update or get data, so components stay in sync.

beginner

Why use a service for state management instead of component properties?

Services allow multiple components to access and update the same data easily. Component properties are local and isolated, so sharing state between components is harder without services.

intermediate

How do Angular services keep state persistent across components?

Angular services are singletons by default when provided in root. This means one instance is shared across the app, so the state inside the service stays consistent and accessible.

intermediate

What Angular feature helps components react to state changes in a service?

Using RxJS Observables inside services lets components subscribe to state changes. When the service updates data, subscribers get notified and update their views automatically.

beginner

Show a simple example of a service holding a counter state with increment method.

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

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

  getCount() { return this.count; }

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

This service keeps count and lets components get or increase it.

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

A Sharing state easily across multiple components

B Making components heavier

C Avoiding use of RxJS

D Keeping state only inside one component

Services allow multiple components to share and update the same state easily.

How does Angular ensure a service is a singleton by default?

A By importing it multiple times

B By creating a new instance for each component

C By using component decorators

D By providing it in the root injector

Providing a service in root makes Angular create one shared instance for the whole app.

Which RxJS feature is commonly used in services to notify components about state changes?

A Observable

B Promise

C Callback

D EventEmitter

Observables let components subscribe and react to changes in service state.

What happens if you store state only in a component property?

A State is saved in a database

B State is shared automatically

C State is local and not shared with other components

D State is lost when component reloads

Component properties are local to that component and not shared.

Which Angular decorator is used to make a class a service?

A @Component()

B @Injectable()

C @NgModule()

D @Directive()

@Injectable() marks a class as a service that can be injected.

Explain how service-based state management works in Angular and why it is useful.

Think about how one place can keep data for many parts of your app.

Describe how you can notify Angular components about changes in service state.

Consider how a message system can tell others when data changes.

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