Services and Dependency Injection in Angular (Introduction)

by | Tech Corner

What is Angular Service?

In simple terms, Angular Service is an object which we can use on multiple places to share a common need, for example, lets we have ten different angular components and we need a logging feature on all/most of them.

The common approach would be adding a method in each component class and using it. This solution will work but this is not an optimized solution.

The other approach could be creating a class and a common method and using its object for the places we need. This is an Angular service.

Why do we need Angular Service?

Now you understood what is angular service. let’s discuss why we need that. you might have already in mind that Angular Services promotes code reusability so it is helpful to developers to easy to implement a common feature and use it in multiple places. On the other side, this helps to find and fix the problems easily as you don’t need to go to all different components and update the code there to fix a problem.

How to create Angular Service?

let’s say you want to log some information to the console from multiple components. This is a perfect candidate to be coded as a service. Let’s take “LoggingService“ as a name for that service.

To create a service name “LoggingService“ you need to go to your application path and run the below command using the terminal/command prompt.

Press Enter and you will see the similar output as below (ignore the warnings, its related to my environment)

There are two files generated using the above command, the spec.ts is for testing, so let’s leave it for now. The “logger.service.ts“ is the actual service file.

Let’s see what is inside the file.

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

providedIn: 'root'
export class LoggerService {

constructor() { }

The above is the default code generated by Angular. Let’s implement a method that can log a given message on the console.

The above is highlighted method which we have added for logging on console for a given message.

You must have noticed that the angular service code is just a simple class with a “@Injectable“ decorator. This decorator help us to inject the service to components and also to another service. i,e, it helps in dependency injection using Angular framework.
Let’s see how?

How to use Angular Service?

To use Angular service you just created follow below steps.

Let’s say you have an “example“ component and you want to log a message on console when a button clicks for that component. You don’t have a component , don’t worry, create it as below.

update “example.component.html“ file as below.

update “example.component.html“ file as below.

Update “example.component.ts“ file as below.

Update the “app.component.html“ file to use the example component.
run the application using “ng serve“ you should see your example component loaded similar to below.
now add the Service class to app.module.ts as highlighted below.
update the example component code to use the Logger Service as below

You may noticed that we are not doing “new“ object here for logger service but Angular is doing dependency injection and will giving us the LoggerService object.

Lets run the project and click on the button.

you should see similar output on the console which you are getting by calling an angular Service and using Angular dependency injection.

Related Blogs You May Like

Angular 15 New Features

Angular 15 New Features

This has been the 3rd quarter in a row now, I am focusing on learning new things Angular brings in its major upgrade. So far I learned Angular 12, 13 and 14 and this time I am focusing on Angular version 15. Angular version was released in November 2022 and basically...

The Role of Cognitive Psychology in User Experience

The Role of Cognitive Psychology in User Experience

IntroductionWhen it comes to User Experience (UX), the design of a product or service plays a critical role in how people interact with it. However, it is not just the aesthetics that matter, but also how people process information and make decisions. Cognitive...