Angular 5 Services

Angular application is built from components – organized in modules with hierarchy. The component represent a user interface element with properties, methods, input and output parameters and more. When we want interaction between components we use input and output parameters but if the interaction is not between parent and child (for example 2 brothers components share functionality) it can be complex to make it using the parent. this is where Angular services help

The main idea behind a service is to provide an easy way to share code and data between components. Using dependency injection you can control how the service instances are shared

Lets start with a simple service to understand the basic concepts

To create a service use Angular CLI

# ng g s Math

Lets implement a simple random function:

export class MathService {
 constructor() { }
 lowlim:number = 10;
 uplim:number = 20;
    let range:number;
    range = this.uplim - this.lowlim;
    return   +Math.floor(Math.random()*range) + +this.lowlim;

To inject the service to the app component add it to the providers list in the component decorator. Declare an object and use it:

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [MathService]
export class AppComponent {
  title = 'app';
  constructor(private _ser:MathService)
    this._ser.lowlim = 100;
    this._ser.uplim = 200;
    this.num = this._ser.getRand();

This will inject a service instance to the component

Note that if you declare 2 objects , you will get the same instance

Now lets create 2 child components Comp2, Comp3:

import { Component, OnInit } from '@angular/core';
import {MathService} from "../math.service";

  selector: 'comp3',
  template: `
    <input type="text" [(ngModel)]="low"/>
    <input type="text" [(ngModel)]="high"/>
    <button (click)="setlim()">Set Limits</button>
    <button (click)="gennum()">Generate</button>
  styles: [],
export class Comp2Component {
  constructor(private _ser:MathService) { }

    this._ser.uplim = this.high;
    this._ser.lowlim = this.low;
    this.num = this._ser.getRand();

The component generate 2 text fields for the random limit and a button to generate a random number in the range. We inject the service to the component decorator and also do the same with comp3 that has the same code , if we put the components in the parent we get 2 different instances

If we declare the provider on the parent component or on the Module we will get the same instance and in this way we can share also data between the components:

  declarations: [
  imports: [
  providers: [MathService],
  bootstrap: [AppComponent]
export class AppModule { }

In this example we set a different range on the components but when we generate random we get numbers from the second range (the last we set)


Asynchronous Operations

It is very common to use a service for asynchronous tasks – for example, creating http request. You can use a Promise object or (and better) observable

Observable is an implementation of publisher subscriber pattern, it is like a stream that you can sent multiple events and subscribe to multiple events. It is part of rxjs

Simple example

import {Observable} from "rxjs";

let t= Observable.interval(1000);
t.subscribe(i => console.log("hello "+i));

In the above example, we create an observable that generate an event every 1 second. We need to subscribe to see something happen – in this example we print a simple message and we get an index as a parameter (incremented counter)

The previous example runs forever, to limit the interval to 5 times add take:

let t= Observable.interval(1000).take(5);

to add other operation add do:

let t= Observable.interval(1000).take(5).do(i => console.log("hello "+i));

Note that you still have to subscribe to make things happens, we can subscribe more than once

t.subscribe(); //subscribe without additional tasks
t.subscribe(j => console.log("more:" + j)); // add more task

You can also apply some operations on the observable :

let t= Observable.interval(1000).take(10).filter(i => i%2==0);
t.subscribe(i => console.log("hello "+i));
t.subscribe(i => console.log("bye "+i));


Working With HTTP

To work with http we need to create http requests, with http we can generate:

GET request – select data (return records as Json object)


POST – insert new data

Content-Type: application/json

    "id": 500,
    "Name": "noya",
    "Price": 444,
    "rate": 3

PUT – update data


Content-Type: application/json

    "id": 500,
    "Name": "noyale",
    "Price": 4443,
    "rate": 3

DELETE – delete data



To make http requests, first we generate a new service

# ng g s Data


Add the HttpModule to the app.module.ts file

imports: [

Create the service

import { Injectable } from '@angular/core';
import {Http} from "@angular/http";
import {Book} from "./Book";
import {Observable} from "rxjs/Observable";

export class DataService {
  constructor(private _http:Http) { }
    return this._http.get("http://localhost:3000/books").map(r => <Book[]>r.json());

http module provides methods for all HTTP request types – here we use get, we convert the result from Response object to a json object and cast it Book array


declare a class:

export class Book{

Build the template:

<button (click)="load()">load</button>
<table  border='1' align="center" width='70%' *ngIf='books && books.length > 0'>
  <tr *ngFor='let b of books'>
    <td> {{}} </td>
    <td> {{b.Name }} </td>
    <td> {{b.Price }} </td>
    <td> {{b.rate}} </td>


Add the code in the component class:

books:Book[] = [];

    this._data.getData().subscribe(b => this.books = b);


The new HttpClient module

One new feature of Angular 5 is the HttpClient Module that is in release version (previously was beta). It make the use of http services much more easy

Add HttpClientModule to import section in app.module

imports: [

Change the service:

import {HttpClient} from "@angular/common/http";

export class DataService {
  constructor(private _htc:HttpClient) { }

    return this._htc.get<Book[]>("http://localhost:3000/books");


As you can see we don’t need to map the result and the generic function makes the casting so the code is much more clear