Why services are needed in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to inject a service into a component.

Angular

constructor(private [1]: DataService) {}

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

AdataService

BDataService

CserviceData

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using unrelated variable names.

In Angular, the service is injected using a variable name with camelCase, like dataService.

2fill in blank

medium

Complete the code to provide a service at the root level.

Angular

@Injectable({ providedIn: '[1]' })

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

Aservice

Bcomponent

Croot

Dmodule

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'component' or 'module' which limits service scope.

Using invalid strings.

Providing a service at the root level makes it a singleton shared across the app.

3fill in blank

hard

Fix the error in the service method call inside the component.

Angular

this.[1].getData().subscribe(data => { this.items = data; });

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

AdataService

Bservice

CDataService

DgetData

Attempts:

3 left

💡 Hint

Common Mistakes

Using the service class name instead of the injected variable.

Calling the method on a wrong variable.

The service instance variable is dataService, not the class name.

4fill in blank

hard

Fill both blanks to create a singleton service and inject it.

Angular

@Injectable({ providedIn: '[1]' })
export class LoggerService {
  log(message: string) { console.log(message); }
}

constructor(private [2]: LoggerService) {}

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

Aroot

BloggerService

Ccomponent

DlogService

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'component' instead of 'root' for provider.

Using wrong variable names for injection.

Providing in root makes the service singleton. The injected variable is loggerService.

5fill in blank

hard

Fill all three blanks to create and use a shared data service.

Angular

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

@Injectable({ providedIn: '[1]' })
export class SharedDataService {
  data = [];
  add(item: string) { this.data.push(item); }
}

@Component({ selector: 'app-list', template: `<ul><li *ngFor="let item of [2].data">{{item}}</li></ul>` })
export class ListComponent {
  constructor(private [3]: SharedDataService) {}
}

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

Aroot

BsharedDataService

CdataService

DsharedData

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names in template and constructor.

Providing service in wrong scope.

The service is provided in root for sharing. The injected variable is sharedDataService, used in template and constructor.

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