@Injectable decorator and providedIn in Angular - Step-by-Step Execution

Concept Flow - @Injectable decorator and providedIn

Define Service Class

↓

Add @Injectable Decorator

↓

Set providedIn Property

↓

Angular Registers Service

↓

Service Available for Injection

↓

Component or Other Service Requests Injection

↓

Angular Provides Singleton Instance

This flow shows how adding @Injectable with providedIn makes Angular register the service and provide a singleton instance wherever injected.

Execution Sample

Angular

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

@Injectable({ providedIn: 'root' })
export class MyService {
  value = 42;
}

Defines a service class with @Injectable and providedIn root, making it available app-wide as a singleton.

Execution Table

Step	Action	Evaluation	Result
1	Angular reads MyService class	Sees @Injectable decorator	Marks class as injectable
2	Reads providedIn: 'root'	Determines service scope	Registers service in root injector
3	Component requests MyService injection	Checks root injector	Provides singleton instance
4	Component uses service.value	Reads value property	Gets 42
5	Another component requests MyService	Checks root injector	Gets same singleton instance
6	Application runs	Service instance reused	No new instances created
7	Execution ends	No more injections	Service lifecycle managed by Angular

💡 Service registered once in root injector; all injections share the same instance.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
MyService instance	undefined	Created singleton instance	Same singleton instance reused	Same singleton instance reused

Key Moments - 3 Insights

Why does Angular create only one instance of the service?

Because providedIn: 'root' registers the service in the root injector, making Angular provide the same singleton instance to all injections, as shown in execution_table steps 3 and 5.

What happens if we omit providedIn in @Injectable?

Angular won't automatically register the service; you must provide it manually in a module or component providers array. This is why step 2 in execution_table is crucial for automatic registration.

Can providedIn have values other than 'root'?

Yes, it can be 'platform', 'any', or a specific module. This changes the injector scope and instance sharing, but 'root' is the most common for app-wide singleton, as shown in the flow.

Visual Quiz - 3 Questions

Look at the execution table, what happens at step 3 when a component requests MyService?

A Angular provides the singleton instance from root injector

B Angular creates a new instance every time

C Angular throws an error because service is not registered

D Angular provides a different instance per component

💡 Hint

Check execution_table row 3 where Angular provides the singleton instance.

At which step does Angular register the service in the root injector?

A Step 1

B Step 2

C Step 4

D Step 6

💡 Hint

Look at execution_table row 2 where providedIn: 'root' is processed.

If providedIn is removed from @Injectable, what changes in the execution?

A Service is still registered automatically in root injector

B Angular registers service in platform injector instead

C Service is not registered automatically and injection fails unless manually provided

D Service becomes a transient instance created on each injection

💡 Hint

Refer to key_moments explanation about missing providedIn and manual registration.

Concept Snapshot

@Injectable decorator marks a class as injectable.
providedIn defines where Angular registers the service.
providedIn: 'root' means app-wide singleton.
Angular creates one instance per injector scope.
Without providedIn, manual provider registration is needed.

Full Transcript

The @Injectable decorator in Angular marks a class as a service that can be injected. The providedIn property inside @Injectable tells Angular where to register this service. When providedIn is set to 'root', Angular registers the service in the root injector, making it a singleton available throughout the app. When a component or another service asks for this service, Angular provides the same instance every time. If providedIn is omitted, Angular does not register the service automatically, so you must add it manually to a module or component providers. This flow ensures efficient reuse and easy dependency management.

Practice

1. What is the main purpose of the @Injectable decorator in Angular?

easy

A. To mark a class as a service that Angular can inject

B. To define a component's template

C. To register a module in Angular

D. To create a new Angular directive

Solution

1. Step 1: Understand the role of @Injectable

   The @Injectable decorator tells Angular that the class can be used as a service and injected into other classes.

2. Step 2: Differentiate from other decorators

   Other decorators like @Component or @NgModule serve different purposes, not marking services.

3. Final Answer:

   To mark a class as a service that Angular can inject -> Option A

4. Quick Check:

   @Injectable = marks service [OK]

Hint: Remember: @Injectable means service ready for injection [OK]

Common Mistakes:

• Confusing @Injectable with @Component
• Thinking it registers modules
• Assuming it creates directives

2. Which of the following is the correct syntax to provide a service at the root level using @Injectable?

easy

A. @Injectable({ provideIn: 'root' })

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

C. @Injectable({ providedAt: 'root' })

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

Solution

1. Step 1: Recall the correct property name

   The correct property to specify where the service is provided is providedIn, not provideIn or others.

2. Step 2: Confirm the value for root-level provision

   Using 'root' as the value means the service is available app-wide as a singleton.

3. Final Answer:

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

4. Quick Check:

   providedIn: 'root' is correct syntax [OK]

Hint: Use exact property name providedIn with value 'root' [OK]

Common Mistakes:

• Misspelling providedIn as provideIn
• Using providedAt or provideAt
• Omitting quotes around 'root'

3. Given the following service code, what will Angular do when this service is injected?

 @Injectable({ providedIn: 'root' })
 export class DataService {
   constructor() { console.log('Service created'); }
 }

medium

A. Angular creates a new instance every time the service is injected

B. Angular does not create the service unless manually added to providers

C. Angular throws an error because providedIn is incorrect

D. Angular creates a single instance shared across the app

Solution

1. Step 1: Understand providedIn: 'root'

   This means Angular will create one singleton instance of the service for the whole app.

2. Step 2: Check service creation behavior

   The constructor logs 'Service created' only once when the singleton is created, not on every injection.

3. Final Answer:

   Angular creates a single instance shared across the app -> Option D

4. Quick Check:

   providedIn: 'root' means singleton service [OK]

Hint: Remember: 'root' means one shared instance app-wide [OK]

Common Mistakes:

• Thinking a new instance is created on each injection
• Assuming an error due to wrong providedIn
• Believing manual provider registration is needed

4. Identify the error in this service declaration:

 @Injectable({
   providedIn: root
 })
 export class LoggerService {}

medium

A. Incorrect decorator name, should be @InjectableService

B. Service class must have a constructor

C. Missing quotes around 'root' in providedIn

D. providedIn cannot be used in @Injectable

Solution

1. Step 1: Check syntax of providedIn value

   The value 'root' must be a string, so it needs quotes: 'root'. Without quotes, it's treated as an undefined variable.

2. Step 2: Verify other parts

   The decorator name @Injectable is correct, constructor is optional, and providedIn is valid here.

3. Final Answer:

   Missing quotes around 'root' in providedIn -> Option C

4. Quick Check:

   String values need quotes in providedIn [OK]

Hint: Always put quotes around string values in decorators [OK]

Common Mistakes:

• Omitting quotes around 'root'
• Confusing decorator names
• Thinking constructor is mandatory

5. You want to create a service that is only available inside a specific feature module, not app-wide. Which is the best way to configure @Injectable and providedIn to achieve this?

hard

A. Use @Injectable() without providedIn and add the service to the feature module's providers array

B. Use @Injectable({ providedIn: FeatureModule }) where FeatureModule is the module class

C. Use @Injectable({ providedIn: 'root' }) and import the service in the feature module

D. Use @Injectable({ providedIn: 'any' }) to limit service to the feature module

Solution

1. Step 1: Understand providedIn options

   Using providedIn: 'root' makes the service app-wide singleton, so not limited to a feature module.

2. Step 2: Provide service only in feature module

   Using providedIn: FeatureModule where FeatureModule is the NgModule class is possible but not officially recommended or supported in all Angular versions. The standard way is to omit providedIn and add the service to the feature module's providers array.

3. Step 3: Evaluate other options

   providedIn: 'any' creates a new instance in each injector but does not restrict to a single module. Importing with providedIn: 'root' makes it app-wide.

4. Final Answer:

   Use @Injectable() without providedIn and add the service to the feature module's providers array -> Option A

5. Quick Check:

   Omitting providedIn and adding to providers array scopes service to module [OK]

Hint: Omit providedIn and add to feature module providers for module scope [OK]

Common Mistakes:

• Using providedIn: 'root' for feature-only service
• Using providedIn: FeatureModule which is not standard
• Misunderstanding providedIn: 'any' scope