Why services are needed in Angular - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use services in Angular?

In Angular, why do we use services instead of putting all logic inside components?

A Services are only used to style components with CSS.

B Services help share data and logic between components, avoiding code duplication.

C Services replace components and handle the user interface directly.

D Services are used to write HTML templates inside TypeScript files.

💡 Hint

Think about how multiple friends might need to use the same recipe without rewriting it.

Services in Angular allow you to keep logic and data separate from the user interface. This way, multiple components can use the same service to share data or functions, making the code cleaner and easier to maintain.

❓ component_behavior

intermediate

Service data sharing behavior

If two Angular components inject the same service instance, what happens when one component changes a value in the service?

A The change is visible to the other component because they share the same service instance.

B The change is not visible because each component gets a new service instance.

C The service resets automatically after each component uses it.

D The service throws an error when multiple components try to use it.

💡 Hint

Imagine two friends sharing the same notebook; if one writes something, the other sees it too.

Angular services are typically singletons within an injector scope. This means components that inject the same service share one instance, so changes in one component affect the others.

📝 Syntax

advanced

Correct service injection syntax

Which option shows the correct way to inject a service named DataService into an Angular component's constructor?

Angular

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-example',
  template: '<p>Example works!</p>',
  standalone: true
})
export class ExampleComponent {
  constructor( /* What goes here? */ ) {}
}

A dataService: DataService = new DataService()

B public DataService dataService

C inject(DataService) dataService

D private dataService: DataService

💡 Hint

Remember how Angular uses constructor parameters with access modifiers for injection.

Angular injects services by declaring them as constructor parameters with an access modifier like private or public. This tells Angular to provide the service instance automatically.

🔧 Debug

advanced

Why is the service data not shared?

Two components inject the same service, but changes in one component are not seen in the other. What is the most likely cause?

A The service is provided in the component decorator, creating separate instances.

B The service class is missing the @Injectable() decorator.

C The components are not declared in the same module.

D The service is imported but never injected in the constructor.

💡 Hint

Check where the service is provided; providing it in components creates new instances.

If a service is provided in a component's providers array, Angular creates a new instance for that component only. To share data, the service should be provided at a higher level like root.

❓ lifecycle

expert

Service lifecycle and state retention

Consider an Angular service provided in root. If a component using this service is destroyed and recreated, what happens to the service's stored data?

A The service data is saved to local storage automatically.

B The service instance is destroyed with the component, so data resets.

C The service instance persists, so stored data remains intact across component recreation.

D Angular creates a new service instance each time the component is created.

💡 Hint

Think about a library book that stays on the shelf even if a reader leaves and returns.

Services provided in root are singletons that live as long as the app runs. Destroying a component does not destroy the service, so its data stays available.

Practice

1. Why do Angular apps use services instead of putting all code inside components?

easy

A. To make components load slower

B. To share data and logic across components easily

C. To avoid using TypeScript

D. To write more HTML code

Solution

1. Step 1: Understand the role of services

   Services hold shared data and logic that multiple components can use.

2. Step 2: Compare with components

   Components focus on showing the UI, not on sharing data or logic.

3. Final Answer:

   To share data and logic across components easily -> Option B

4. Quick Check:

   Services share data and logic = A [OK]

Hint: Services share logic, components show UI [OK]

Common Mistakes:

• Thinking services slow down the app
• Believing services replace HTML
• Confusing services with components

2. Which is the correct way to inject a service into an Angular component constructor?

easy

A. constructor() { this.myService = MyService; }

B. constructor(myService = new MyService()) {}

C. constructor(public myService) {}

D. constructor(private myService: MyService) {}

Solution

1. Step 1: Recall Angular dependency injection syntax

   Angular injects services by declaring them as private/public in the constructor parameters.

2. Step 2: Check each option

   constructor(private myService: MyService) {} uses correct syntax with private and type annotation. Others create instances manually or miss type.

3. Final Answer:

   constructor(private myService: MyService) {} -> Option D

4. Quick Check:

   Use private with type in constructor = D [OK]

Hint: Use private and type in constructor for services [OK]

Common Mistakes:

• Manually creating service instances
• Missing type annotation
• Assigning service without new keyword

3. Given this service and component code, what will be logged?

export class CounterService {
  count = 0;
  increment() { this.count++; }
}

@Component({ selector: 'app-one', template: '' })
export class OneComponent {
  constructor(private counter: CounterService) {}
  ngOnInit() { this.counter.increment(); console.log(this.counter.count); }
}

@Component({ selector: 'app-two', template: '' })
export class TwoComponent {
  constructor(private counter: CounterService) {}
  ngOnInit() { this.counter.increment(); console.log(this.counter.count); }
}

medium

A. 1 and 2

B. 1 and 1

C. 0 and 0

D. 2 and 2

Solution

1. Step 1: Understand service instance sharing

   Angular provides the same service instance to both components if the service is singleton.

2. Step 2: Trace increments and logs

   OneComponent increments count to 1 and logs 1. Then TwoComponent increments to 2 and logs 2.

3. Final Answer:

   1 and 2 -> Option A

4. Quick Check:

   Shared service count increments = C [OK]

Hint: Singleton service shares state across components [OK]

Common Mistakes:

• Assuming separate service instances per component
• Ignoring increment effect order
• Thinking count resets each time

4. What is wrong with this service usage in a component?

@Injectable({ providedIn: 'root' })
export class DataService {
  data = [];
}

@Component({ selector: 'app-test', template: '' })
export class TestComponent {
  dataService: DataService;
  constructor(private dataService: DataService) {
  }
}

medium

A. Service should be injected, not created with new

B. DataService must not have data property

C. Component must not have constructor

D. Service must be provided in component, not root

Solution

1. Step 1: Identify service instantiation method

   The component creates a new service instance manually using new, bypassing Angular's injector.

2. Step 2: Understand Angular DI pattern

   Services should be injected via constructor parameters to get the singleton instance managed by Angular.

3. Final Answer:

   Service should be injected, not created with new -> Option A

4. Quick Check:

   Inject services via constructor, not new [OK]

Hint: Never use new for services, always inject [OK]

Common Mistakes:

• Creating service instances manually
• Ignoring Angular dependency injection
• Misunderstanding providedIn usage

5. You want to share user login status across multiple components and keep UI code simple. Which approach best uses Angular services?

hard

A. Use local variables in components without services

B. Store login status in each component separately

C. Create a UserService with login status and methods, inject it in components

D. Write login logic inside each component's template

Solution

1. Step 1: Identify need for shared state

   Login status must be shared and consistent across components.

2. Step 2: Choose best practice

   Using a UserService to hold login state and methods keeps components simple and shares data.

3. Final Answer:

   Create a UserService with login status and methods, inject it in components -> Option C

4. Quick Check:

   Use service to share state and logic [OK]

Hint: Use services to share app state and logic [OK]

Common Mistakes:

• Duplicating state in components
• Putting logic in templates
• Avoiding services for shared data