Registering a Service with an Angular Module or Component

Jul 14, 2020 • 5 Minute Read

Introduction

Before an Angular service can be consumed, it has to be registered with either an Angular module or an Angular component. There are multiple ways to register a service in Angular. In this guide, you will learn about the different ways to register an Angular service and consume it in other services and components.

Registering a Service in a Component

This method should be used when the service in concern is strictly related to the concerned component and won't be used elsewhere in the app. You can register a service using the following syntax.

      import { Component, OnInit } from '@angular/core';
import { DemoService } from './demo.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers:[DemoService]
})
export class AppComponent implements OnInit {
  title = 'services-demo';
  someProperty;

  constructor(private demoService:DemoService)
  {

  }

  ngOnInit()
  {
    this.someProperty = this.demoService.someProperty;
  }

}
    

Notice that in the providers array of the component, the service is registered and then consumed in the constructor of the component. This way, the service will not be used by any other component, directive, or pipe in the whole app.

Real World Scenario

Suppose you are building an app in which you are required to build a component that will convert text to speech. This component will require a service that will talk to some prominent language translator API from Microsoft, Google, or Facebook. This reusable Angular service will be used only in this component and not anywhere else, so this can be injected only in this component.

Registering a Service in AppModule

This method should be used when you want to have only one instance of your service to be used across the app. When only one instance of your service exists across the app, it is called a singleton service. You can register a service in the app module using following syntax:

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

import { AppComponent } from './app.component';
import { DemoService } from './demo.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [DemoService],
  bootstrap: [AppComponent]
})
export class AppModule { }
    

Notice that in the providers array of the component, the service is registered. This way the service is consumable in any module, service, component, directive, or pipe across the app.

Self Registering a Service Using providedIn Attribute

This is yet another way of registering only one instance of a service that can be consumed across the app in any module, service, component, directive, or pipe. You can register the service in root injector of the app using following syntax. This is the preferred way to create a singleton service from the beginning of Angular 6.0.

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

@Injectable({
  providedIn: 'root'
})
export class DemoService {

  someProperty = 'Some Value';
  constructor() { }


}
    

Notice that the providedIn attribute in the Injectable() decorator has been used to register the service in the root injector of the app.

Real World Scenario

This example applies to both the approaches given above, which help you register a singleton instance of a service. In any enterprise app, authentication is an important aspect. In a single page app framework, services generally talk to a corresponding server side API, so the authentication service will talk to the authentication endpoint on the server. On the client side, only one instance of this service will be required, so this service can be registered in the AppModule or using providedIn attribute on the service itself. A simple authentication service will have at least a currentUser property telling which user is currently logged in. The login and logout methods are shown below.

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

@Injectable( 
{providedIn: 'root' }
)

export class AuthService {
currentUser:IUser;

constructor() { }

login(){}
logout()
{}
}
    

Single Instance of a Service by Registering in a Module

When you register the service in a feature module and that feature module is imported only by the app level AppModule, then also only one instance of the service exists and is available for use by any other feature module, service, component, directive, or pipe across the app.

Real World Scenario

Any app can have a requirement to show small toast messages to the end user on certain user interactions. Such toast messages can be shown to the user by using a Toastr Javascript library. Since Toastr JavaScript library is a vanilla JavaScript library, it is a best practice to wrap it inside a reusable Angular service. This Toastr reusable service is an example of a shared service that can be registered in the shared module. Shared modules are generally the modules that are only imported by an app module, so only one instance of the Toastr service will exist in the component.

Conclusion

Congratulations!! You have learned different ways of registering a service for use in an Angular app. For more information, please refer to the Singleton Service and Component Architecture.