Angular 2 Services


What’s a service in angular 2 typescript project?

If a piece of code is needed by many components in our application. A good practice is to create a single reusable service.

When a component needs this service we can simply inject it (the service).

angular 2 services example
angular 2 services example

let’s discover what’s a service

angular 2 service
angular 2 service


try the live example Yourself.

try angular 2 service
try angular 2 service


  • A service is the mechanism used to share functionalities over Components (or with one Component if our app contains only one Component)
  • As you may already know, we can create Components in angular 2 and nest multiple Components together with selectors. Once our Components are nested we need to manipulate some Data and maybe this Data is not just a variable within our Component. Or we want to do some calculations.
  • In real life Data comes from Server. (e.g. JSON file)
  • Service is the best way to handle this.
  • Service is the best place from where we can bring our external Data to our app. Or do some repetitive task or calculations.
  • Service can be shared between as many as Components we want.
  • Or maybe you want to share other things (functionalities) over multiple Components or Portions of your app? The answer is : Service


angular 2 services - build our example
angular 2 services – build our example


let’s build our example / Solar System Planets

  • First we create a class Planet (as instance we will have Earth, Mars, Jupiter … )

File : planet.ts

 * Created by Tareq Boulakjar. from
export interface Planet{
    name: string,
    surface: string,
    parentSystem: string,


  • In this example we mock the data, later we will see how to bring data from server using HTTP.

Let’s create our data.

File : planets-data.ts

 * Created by Tareq Boulakjar. from
import {Planet} from "./planet";

export const PLANETS: Planet[] = [
    {id:1,name:'Earth',surface:'Rocky',parentSystem:'Solar System'},
    {id:2,name:'Mars',surface:'Rocky',parentSystem:'Solar System'},
    {id:1,name:'Jupiter',surface:'Gaseous',parentSystem:'Solar System'},
    {id:1,name:'Mercury',surface:'Rocky',parentSystem:'Solar System'},


create the service
create the service


It’s time to create our service; this service will return the data just created abode.

file: planet.service.ts

 * Created by Tareq Boulakjar. from
import {Injectable} from 'angular2/core';
import {PLANETS} from './planets-data';

export class PlanetService {
        return Promise.resolve(PLANETS);

mark a class as a service

mark a class as a service

How to mark a class as a service?

  • We need to declare a Decorator called Injectable.
  • This will make our (service) class injectable in other components in our application.
  • We can now get an instance of our Service Class in another Class.
  • Inside our service we have a method called getPlanets(). We use inside this method a promise to return the value of PLANETS.


In this chapter we explain just the Service; you can check other tutorials on:

  • We adopt this approach to make it easy to understand each part independently.


call / inject the service
call / inject the service


In our main component we inject the service using the provider property in @

File: planets-list.component.ts

  • In this example we use nested components, we have already explained what it means in a previous tutorial, so it will be easy for you understand. We have a planet component; we call this component inside another component planets-list component.
  • Please check the live example to get the code related to the planet component.
 * Created by Tareq Boulakjar. from
import {Component} from "angular2/core";
import {PlanetService} from "./planet.service"; //1
import {PlanetComponent} from "./planet.component";
import {Planet} from "./planet";

    selector: "my-app",
    templateUrl: "app/planet-list.component.html",
    directives: [PlanetComponent],
    providers:[PlanetService], //2
                .title {
                    background-color: #9C00FE;
                    background-color: black;
                    color: white;

export class PlanetListComponent{
    public planets : Planet[];

    public selectedPlanet = {};

    public onNameClick(planet){
        this.selectedPlanet = planet;
    constructor(private _planetService: PlanetService){  // 3

    // make a call to our planet service
    getPlanets(){  //4
        this._planetService.getPlanets().then((planets:Planet[])=>this.planets = planets);



1) In this part of code we import our service. (//1)

2) Next step is to inject our service in the component using the providers property. (//2)

3) We create a private variable called _planetService , the type of this variable is PlanetService. (//3)

4) In this method we call the service using the promise. (//4) getPlanets().then()



In another tutorial we will show you how to optimize the call. In this tutorial we try to keep it easy to understand.

Done !