What is Angular 4 Service and How to Use it

How to Create Service in Angular 4

How to Create a Service in Angular 4

What is Angular 4 Service and How to Install and Use the Service.

If you did not create your first Angular 4 project yet you can check click here to learn how to create Angular project.

What is Angular Service

While creating an application you will have piece of code or method that you want to use and call in a different places, instead of repeating it you can insert it in a new reusable file which called service and call it 'inject it ' from different components whenever needed by importing it at the beginning of the code.

Create Angular 4 Service

In below example i will create a service call it dotsway this can be done by following one of the below methods:

#1 Create a file inside your /app folder and call it dotsway.service.ts  and add below code to it.

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

@Injectable()
export class dotsway {
}

Or you can generate all above automatically by following the below method.

#2 Go to CMD and from your Angular project folder rung:

ng g service dotsway

If you receive below warning don't worry as it's a normal behavious from the Cli and it will be cleared after adding the import to the module.

WARNING Service is generated but not provided, it must be provided to be used

This will create the file for you and put all required code

 

What is Angular 4 Injectable Function

Inside the service ts file you will notice a "@Injectable()" function.

Angular 4 Injectable Service

Injectable tells Angular typescript that this service may need to use dependencies, with this you can secure the service whenever you use any dependencies and it's needed for the code it will be added automatically to the service.

 

How to use the Angular 4 Service

Add Angular 4 Service to app.module

To use the created service you have to import the service to your app module.

app.module

import { DotswayService } from './dotsway.service';

How to find Angular Service Name?

Service name will be inside the service file after the 'export class' section "Check below figure"

Find Angular Service Name

Also to register the service and to use it you need to add it to the providers section in the same file

providers: [DotswayService],

 

Adding your Code to the Service

For this example purpose i will add a method/function and call it printOutNow and will return to the screen any text, for this open the service file which is 'dotswat.service.ts' in our case and add the following under the constructor:

printOutNow() {

return 'Dostway is Here !'

}

 

Using Service in Component

To use service in a specific component you need to import the Angular service created earlier.

Ex.: app.component.ts

import { dotsway} from './dotsway.service';

Now inject the constructor to AppComponent class to be able to use it

constructor(private dotswayService:dotswayService) {

}

And instead of having the data in the html we can do a console out by adding the following:

readMe: string = " ;   // define/declare new string
ngOnInit(){               // is called to initiate the code when html is loaded
this.readMe = this.dotswayservice.printOutNow() ; // set the value of readMe to the output of method created in service file
console.log(this.readMe);
}

Share and like the page for updates and notification.


Subscribe to
for video tutorials updates

2 thoughts on “What is Angular 4 Service and How to Use it

  1. Pingback: Angular 4 Structure - Part of Angular 4 QuickStart Tutorial

  2. Pingback: Angular 4 Component Structure and Properties

Comments are closed.