Angular Service and How to Inject A Service in Angular

Learn how to inject an Angular services.

What is a service in Angular

An Angular service is a class that serves a single responsibility and a well-defined purpose. Methods contained within a service perform different but related tasks to provide functionality to achieve a purpose.
Angular services are singleton objects. They are instantiated only once during the lifetime of an application.

Read more about Angular Service here

How to inject a service

There are a couple of ways to inject an Angular services.

Angular Injector

You can import Injector from ‘@angular/core’ and use this injector object to inject / get a service by its token.

Using injector allows more control on when and whether to inject a service. However, greater flexibility comes with a cost.

When you use an injector to inject a service and if the service is not used, it is not tree-shakable. This is because Angular compiler cannot identiy all the places in your code where a service is injected and thus, services injected using an injector will be included by default (not tree-shakable).

Without Factory Provider:

import { Component, Injector } from '@angular/core';
import { NoteService } from './note.service';

@Component({
  selector: 'app-note',
  templateUrl: './note.component.html',
  styleUrls: ['./note.component.scss']
})
export class NoteComponent {
  noteService: NoteService;

  constructor(private injector: Injector) { }

  ngOnInit() {
    this.noteService = this.injector.get(NoteService);
  }
}

With Factory Provider:
You can read more about Angular Factory Provider here.

import { Component, Injector } from '@angular/core';
import { NoteService } from './note.service';
import { 
  noteServiceProvider 
} from './note.service.provider';

@Component({
  selector: 'app-note',
  templateUrl: './note.component.html',
  styleUrls: ['./note.component.scss']
  providers: [ noteServiceProvider ]
})
export class NoteComponent {
  noteService: NoteService;

  constructor(private injector: Injector) { }

  ngOnInit() {
    this.noteService = this.injector.get(NoteService);
  }
}

Class Constructor

You can inject an Angular service in a component, service, directive etc by specifying the service and its type in a component’s constructor.
Note that injecting a service through a class constructor is, in general, tree-shakable.

import { MyService } from './my.service';

constructor(private myService: MyService) {}

Without Factory Provider:

import { Component } from '@angular/core';
import { NoteService } from './note.service';

@Component({
  selector: 'app-note',
  templateUrl: './note.component.html',
  styleUrls: ['./note.component.scss']
})
export class NoteComponent {
  constructor(private noteService: NoteService) {}

  takeNote(note) {
    this.noteService.write(note);
  }
}

With Factory Provider:
When you use Angular service with a factory provider, you can include its factory provider in the providers attribute in a service’s @Component decorator.

However, note that configuring a service provider this way is not tree-shakable. This is because Angular compiler cannot determine whether to exclude service factory provider definition based on whether service itself is being used.

To make your service tree-shakable, service factory provider definition should be included in the service’s @Injectable decorator. Check out this tree-shakable service example on how to write a tree-shakable service that is configured with a factory provider.

import { Component } from '@angular/core';
import { NoteService } from './note.service';
import { 
  noteServiceProvider 
} from './note.service.provider';

@Component({
  selector: 'app-note',
  templateUrl: './note.component.html',
  styleUrls: ['./note.component.scss']
  providers: [ noteServiceProvider ]
})
export class NoteComponent {
  constructor(
    private noteService: NoteService) {}

  takeNote(note) {
    this.noteService.write(note);
  }
}

Support Jun

Thank you for reading!    Support Jun

Support Jun on Amazon US

Support Jun on Amazon Canada

If you are preparing for Software Engineer interviews, I suggest Elements of Programming Interviews in Java for algorithm practice. Good luck!

You can also support me by following me on Medium or Twitter.

Feel free to contact me if you have any questions.