What is An Angular Service?

Re-using code when you are a developer is one of the most time efficient things you can do. There is a well know acronym we developers used and it’s called ‘DRY’ which means, “Don’t Repeat Yourself”.

This is where Angular Services truly shine! They allow you to offset code in a service and call it wherever you need it throughout your project and use any of the defined properties and methods when needed.

How to create an Angular Service?

Creating a new service is pretty easy, using the Angular CLI (Command Line Interface). Assuming you are already in your project directory, In the Terminal or Console, which ever you are using, simply write the following command:

ng g service myservicename

This is telling angular to generate a service called myservicename. You should see something like the following in the terminal when it has successfully generated your new service:

installing service
create src/app/myservicename.ts
create src/app/myservicename.ts
WARNING Service is generated but not provided, it must be provided to be used

The warning is nothing to worry about, all it means is we have to add our service to our providers property in the NgModule. Go ahead and open up your main app.module.ts file and add the following code, add your import at the very top with all your other imports, then add the service to your providers section.

import { MyservicenameService } from './myservicename.service';

@NgModule({

providers: [MyservicenameService],

})

You’ve done it! you have created your first service! now lets find out how we can use our service.

Adding data to our new service

If you open up your newly created service file you will see something like the following:

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

@Injectable()
export class MyservicenameService {

constructor() { }

}

You may notice this looks a lot like a standard component except now its importing an Injectable instead of a component. An Injectable decorator has a specific function that emits metadata associated with the service, this is an angular thing that lets it know if it needs to inject any other dependency into this particular service.

So now we can do anything we want in our service, such as connect to a database or create a function to do anything you may need to reuse throughout your project.

To keep things simple, we will create a simple method to return a string of text, add the following below the constructor in your service file:

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

@Injectable()
export class MyservicenameService {

constructor() { }

myAwesomeMethod() {
return 'My Service Works!';
}

}

Using our new service

Ok so now you have generated a service, you have added it to your app.module.ts file and set it as a provider, you have added a method in your service that you wish to reuse throughout your project, so now let’s make the magic happen and call your service from within another component!

Simply add the following in the component you wish to use the service is, add it to the top of the file with the rest of your imports:

import { MyservicenameService } from './Myservicename.service';

We now have to add it to the constructor to allow us to use it through dependency injection.


constructor(private myservice:MyservicenameService) {
}

now if we want to make use of our service we use the variable we applied in the constructor: myservice

We will execute some data in the ngOnInit() lifecycle hook, anything in this hook runs when the component loads.

myMadeUpProperty:string = '';
ngOnInit() {
this.myMadeUpProperty = this.myservice.myAwesomeMethod();
}

What we are doing is creating a property, giving it a type string and making its value empty. In the ngOnInit we are calling our service, using myservice which then calls myAwesomeMethod() in our service file, which if you remember returns a string of text saying, “My Service Works!”.

Now how do we see our string of text on screen I hear you ask? well we will be using something called interpolation. Hop on over to your components HTML File, then add the following code anywhere you want to see your string of text appear:


{{ myMadeUpProperty }}

The Squiggly brackets you see wrap our property name which we declared a moment ago below our constructor. This reads and evaluates the property and interprets the result on the screen, so if you now run ng serve in your terminal you will now see on your screen:

“My Service Works!”

Congratulations, you made your first service and put it into practice! you are awesome!

Final Thoughts

Services are wonderful for numerous reasons, from keeping your code modular, clean and especially non repetitive, which is important when you are a programmer. Services can be used to do anything from user authentication, database calls, or even simple things like we have demonstrated here today. Best of all, you can import your service in any component and use it as many times as needed throughout your project.

I hope you have enjoyed this tutorial and feel free to leave a comment below if you have any questions, suggestions or feedback.

Leave a Reply