Angular Service Dependency Injection

angular service dependency injection

Services in Angular are used to define data and logic that is not associated with a particular view which can be shared across components. In this tutorial we’ll learn how to create a service, and then make use of dependency injection to use that service in a given component or class. If you have worked with dependency injection in any other object-oriented programming language, you’ll feel right at home.


Create The Service Class

A service is just class with a specific purpose. You can use a service class for features that should be reusable across components. Their behavior is independent from any one single component. They also serve the purpose of allowing you to have less code in any particular component class, since you just inject what you need as a dependency. Here, we will create a service which fetches the list of games for our application.

create file for angular service


game.service.ts

The format for a service is quite similar to creating a component Typescript file with the difference being that we use the @Injectable() decorator.


Register The Service

In order to use the service, it must be registered with Angular. This creates a single instance of the service class, which is then managed by the Angular Injector. To register our service, we can pass the { providedIn: ‘root’ } object to the @Injectable() Decorator.


Inject The Service Into A Component

To use the service which is now registered, we can use Dependency Injection to pass an instance of the service class into the component class. This is done in the constructor and highlighted below.


game-list.component.ts

Notice in the snippet above in the ngOnInit() lifecycle hook that we are able to make use of a method that exists in the external service class (getGames()). This is made possible since the service was injected into this component class earlier. Neat!

Now, when viewing the application the list of games is still there. We didn’t so much change any functionality, but we did complete a Code Refactor. By moving the responsibility of fetching games out of game-list.component.ts, and into game.service.ts – we have made the game list component do less work on its own which therefore means less code and cleaner syntax. In addition, if there are any other components that might like to fetch a list of games, they too could simply inject an instance of the service class and do so. This is a very popular pattern in almost all object-oriented programming styles.
angular fetch data from service


Summary

In this tutorial we learned how to create a new Service Class in Angular, then use Dependency Injection to use it anywhere we like.

  • Building a Service follows the same rough outline of building a component
  • Name the class so it represents what it does
  • Use PascalCasing as a matter of convention
  • Append “Service” to the class name
  • While components use the @Component() Decorator, Services will use the @Injectable() decorator
  • Register the service by passing in an object to the @Injectable() decorator with the providedIn propery set
  • To use the Service Class in a component, inject that service into the component by way of the class constructor