How to Provide Service at Component Level in Angular

To provide a service at the component level in Angular, add the service class to the component's providers array in its decorator. This creates a new instance of the service unique to that component and its children, isolating it from other parts of the app.

Syntax

In Angular, you provide a service at the component level by adding it to the providers array inside the @Component decorator. This tells Angular to create a new instance of the service for that component only.

Here is the syntax:

• @Component: Decorator that defines the component metadata.
• providers: Array where you list services to provide at this component level.
• MyService: The service class you want to provide.

typescript

import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  providers: [MyService]
})
export class ExampleComponent {
  constructor(private myService: MyService) {}
}

Example

This example shows a component that provides its own instance of a service. The service has a counter that increments each time a method is called. Because the service is provided at the component level, each component instance has its own counter.

typescript

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

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

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count }}</p>
    <button (click)="increment()">Increment</button>
  `,
  providers: [CounterService]
})
export class CounterComponent {
  count = 0;
  constructor(private counterService: CounterService) {}

  increment() {
    this.count = this.counterService.increment();
  }
}

Output

When you click the button, the count number increases only for that component instance, showing isolated service state.

Common Pitfalls

One common mistake is providing the service both at the root and at the component level unintentionally, which can cause confusion about which instance is used.

Another pitfall is expecting the service state to be shared across components when provided at the component level; each component gets its own instance.

typescript

/* Wrong: Providing service at root and component level unintentionally */
import { Injectable, Component } from '@angular/core';

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

@Component({
  selector: 'app-sample',
  template: '<p>{{dataService.data}}</p>',
  providers: [DataService] // This creates a new instance, hiding the root one
})
export class SampleComponent {
  constructor(public dataService: DataService) {}
}

/* Right: Provide only at component level or root, not both */
@Injectable()
export class DataService {
  data = 'component-level';
}

@Component({
  selector: 'app-sample',
  template: '<p>{{dataService.data}}</p>',
  providers: [DataService] // Only here
})
export class SampleComponent {
  constructor(public dataService: DataService) {}
}

Quick Reference

• Use providers array in @Component to provide service at component level.
• Each component instance gets a new service instance.
• Service state is isolated to that component and its children.
• Do not mix providedIn: 'root' and component-level providers for the same service.

Key Takeaways

Add the service class to the component's providers array to provide it at component level.

Component-level services create isolated instances unique to each component.

Avoid providing the same service both at root and component level to prevent confusion.

Component-level service state is not shared across different component instances.

Use component-level providers to encapsulate service logic within a component and its children.