Why services are needed in Angular - Visual Breakdown

Concept Flow - Why services are needed

Component A needs data

↓

Calls Service method

↓

Service fetches or holds data

↓

Returns data to Component A

↓

Component B also needs same data

↓

Calls same Service method

↓

Service returns shared data

↓

Both components use consistent data

Components ask the service for data or logic. The service holds or fetches data and shares it with all components that need it.

Execution Sample

Angular

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

@Injectable({ providedIn: 'root' })
export class DataService {
  data = 'Shared info';
  getData() { return this.data; }
}

A simple Angular service holds shared data and provides a method to get it.

Execution Table

Step	Action	Component A State	Service State	Component B State	Output
1	Component A calls getData()	Waiting for data	data = 'Shared info'	Idle	Returns 'Shared info'
2	Component A receives data	data = 'Shared info'	data = 'Shared info'	Idle	Component A displays 'Shared info'
3	Component B calls getData()	data = 'Shared info'	data = 'Shared info'	Waiting for data	Returns 'Shared info'
4	Component B receives data	data = 'Shared info'	data = 'Shared info'	data = 'Shared info'	Component B displays 'Shared info'
5	No more calls	data = 'Shared info'	data = 'Shared info'	data = 'Shared info'	Execution ends

💡 Both components received the same shared data from the service, no further calls.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
Component A data	undefined	waiting	'Shared info'	'Shared info'	'Shared info'	'Shared info'
Service data	'Shared info'	'Shared info'	'Shared info'	'Shared info'	'Shared info'	'Shared info'
Component B data	undefined	undefined	undefined	waiting	'Shared info'	'Shared info'

Key Moments - 3 Insights

Why do both components get the same data from the service?

Because the service holds the data in one place and both components call the same service method, they share the same data instance (see execution_table steps 1 and 3).

Why not put data directly inside components instead of a service?

If data was inside components, each would have its own copy, causing inconsistency. The service centralizes data so all components stay in sync (see variable_tracker showing shared service data).

What happens if Component B calls getData() before Component A?

The service still returns the same shared data. The order of calls does not change the shared data state (see execution_table steps 1-4).

Visual Quiz - 3 Questions

Look at the execution_table, what is Component A's data after step 2?

A 'Shared info'

B undefined

C waiting

D null

💡 Hint

Check the 'Component A State' column at step 2 in the execution_table.

At which step does Component B receive the shared data?

A Step 1

B Step 3

C Step 4

D Step 2

💡 Hint

Look at when Component B's state changes to having data in the execution_table.

If the service did not share data, what would happen to Component B's data?

A It would be the same as Component A's data

B It would be undefined or different

C It would cause an error

D It would automatically update Component A's data

💡 Hint

Refer to the key_moments explanation about data sharing and consistency.

Concept Snapshot

Angular services hold shared data or logic.
Components call service methods to get or update data.
Services provide a single source of truth.
This avoids duplicated data in components.
Services enable easy data sharing and consistency.

Full Transcript

In Angular, services are used to hold data or logic that multiple components need. Instead of each component having its own copy, they call the same service to get shared data. This keeps data consistent and easier to manage. For example, Component A calls a service method to get data, and the service returns the shared data. Later, Component B calls the same method and gets the same data. This way, both components show the same information. If data was inside components only, they could get out of sync. Services solve this by being a central place for data and logic.

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