How to Inject Service in Component in Angular: Simple Guide

In Angular, you inject a service into a component by adding it as a parameter in the component's constructor with a private or public modifier. The service must be decorated with @Injectable() and provided in a module or root injector to be available for injection.

Syntax

To inject a service in an Angular component, declare it in the component's constructor with an access modifier like private or public. Angular's dependency injection system will provide the service instance automatically.

• constructor(private myService: MyService): Declares a private property myService of type MyService that Angular will fill.
• @Injectable(): Marks the service class so Angular can inject it.
• providedIn: 'root': Makes the service available app-wide.

typescript

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  getValue() {
    return 'Hello from service';
  }
}

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

@Component({
  selector: 'app-example',
  template: '<p>{{ message }}</p>'
})
export class ExampleComponent {
  message: string;

  constructor(private myService: MyService) {
    this.message = this.myService.getValue();
  }
}

Output

<p>Hello from service</p>

Example

This example shows a simple service that returns a string and a component that injects this service to display the string in its template.

typescript

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

@Injectable({
  providedIn: 'root'
})
export class GreetingService {
  getGreeting() {
    return 'Welcome to Angular service injection!';
  }
}

import { Component } from '@angular/core';
import { GreetingService } from './greeting.service';

@Component({
  selector: 'app-greeting',
  template: '<h1>{{ greeting }}</h1>'
})
export class GreetingComponent {
  greeting: string;

  constructor(private greetingService: GreetingService) {
    this.greeting = this.greetingService.getGreeting();
  }
}

Output

<h1>Welcome to Angular service injection!</h1>

Common Pitfalls

Common mistakes when injecting services include:

• Not adding @Injectable() to the service class, so Angular cannot inject it.
• Forgetting to provide the service in providedIn or a module's providers array.
• Not using an access modifier (private or public) in the constructor parameter, so the service is not stored as a property.
• Trying to inject a service without importing it correctly.

typescript

/* Wrong: Missing access modifier, service won't be stored */
constructor(myService: MyService) {
  // myService is not accessible as a property
}

/* Right: Use private or public to store service */
constructor(private myService: MyService) {
  // myService can be used in the component
}

Quick Reference

Step	Description	Example
1	Create service with @Injectable and provide it	@Injectable({ providedIn: 'root' }) export class MyService { }
2	Import service in component	import { MyService } from './my-service';
3	Inject service in constructor with access modifier	constructor(private myService: MyService) { }
4	Use service methods or properties in component	this.myService.someMethod()

Key Takeaways

Always decorate services with @Injectable() and provide them in root or a module.

Inject services by declaring them in the component constructor with private or public.

Use the injected service inside the component via the constructor parameter property.

Import the service correctly to avoid injection errors.

Missing access modifiers in constructor parameters prevent service injection.