Understand Services In Angular 2

Introduction

 

Services in Angular 2 are JavaScript functions, which are responsible for performing a single task. Services may have their associated properties and the methods, which can be included in the component. Services are injected, using DI (Dependency Injection).

Angular 2 has only one way to create a Service as compared to Angular 1.x. There are five ways to create a Service: Service, Factory, Constant, Provider and Values. Also, there is no clear documentation about where to use which. Following three steps are required to create an Angular 2 Service.

• Import the injectable member.
• Add the @Injectable Decorator.
• Export Service class.

The basic syntax is given below to define Services in Angular 2.

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

@Injectable()
export class MyService {

}

Service example

In the example given below, I have created a function named GetText, which returns simple text "Text from Service".

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

@Injectable()
export class MyService {
    GetText() {
        return "Text From Service";
    }
}

The Service in Angular 2 is a JavaScript function, which can be used by one or more components. We can either import the Service within the component or in module class, so that multiple components can access the Service. We will learn both the scenario.

 

Importing the Service to Component

 

There are four simple steps to use/import Service in the component.

• Import the Service to the component.
• Add it as a provider.
• Include it through Dependency Injection.
• Use the Service function. 

 

 

app.component.ts

import { Component } from '@angular/core';
import { MyService } from './app.service';

@Component({
  selector: 'test-app',
  templateUrl: './app/example.html',
   providers: [MyService]
})

export class AppComponent {
    name = "Jignesh";
    messageText = '';
    constructor(private _myService: MyService) {

    }
    onClickMe() {
        this.messageText = this._myService.GetText();
    }
}

Example.html 

<div>
    <h4>Event Binding</h4>
    <br/>
    <button (click)="onClickMe()">Click me!</button>
    <br/><br/>
    <span> {{messageText}} </span>
</div>

 

 

Include the Service in module

 

In this case, we need to add Service as the provider property in to module instead of the component. This step is different when we include Service into the specific component. The Services can be included either in feature module or root module, which depends on the requirement.

 

In the example given below, I have included Service in root module.

 

App.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { MyService } from './app.service';


import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ],
  providers: [MyService]
})

export class AppModule {
}

Now, all the components within the module are able to access the Service. There is no longer need to include the Service in the providers array within the component's metadata.

 

Inject Service into other Service

 

We can also inject one Service into other Service. Process of injecting one Service to other Service is same as injecting the Service into the component.

 

Now, I am creating OtherService in this project and injecting this Service in to MyService.

 

OtherService.ts

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

@Injectable()
export class OtherService {
    GetMyText() {
        return "Text From Other Service";
    }
}

MyService.ts

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

@Injectable()
export class MyService {
    constructor(private otherService:OtherService) {

    }

    GetTextFromOtherService() {
        return this.otherService.GetMyText();
    }
}

Summary

 

Services in Angular 2 are JavaScript functions, which are responsible for performing a single task. Services may have their associated properties and methods, which can be included in the component or other Service.