Services and Dependency Injection in Angular (Introduction)

by | Feb 6, 2023 | 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'; @Injectable({ 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.


Submit a Comment

Your email address will not be published. Required fields are marked *

Related Blogs You May Like

Design Thinking – Agile Way

Design Thinking – Agile Way

Design Thinking and Agile methodologies are both approaches to problem-solving that have gained popularity in recent years. While they come from different backgrounds and have different origins, they share many similarities and can be used together to create a more...

A beginner’s guide to React hooks

A beginner’s guide to React hooks

What are hooks? According to the React documentation, hooks provides us a way to use state and other features of React without writing a class component. Hooks let you use the class component's lifecycle features inside a function component. Initially, when I started...