Angular2 use RXjs observable instead of promises. It work as follows.

create httpService as follows.

httpService.ts

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

import {Http, Response, RequestOptions, Request, Headers} from '@angular/http';



declare let ApiUrl : any;



@Injectable()

export class httpService {

    constructor(private http: Http){}



    getHeader = () => {

        let headers = new Headers();

        headers.append(Content-Type, 'application/json');



        return headers;

    };



    request = (req) => {

        let baseUrl = ApiUrl,

            requestOptions = new RequestOptions({

            method: req.method,

            url: baseUrl+req.url,

            headers: req.header ? req.header : this.getHeader(),

            body: JSON.stringify(req.params)

        });



        return this.http.request(new Request(requestOptions))

                        .map((res:Response) => res.json());

    }

}

Now simply use this service in your components/directives as below:

componenet.ts

import {Component, Inject, Directive, Input, ElementRef} from '@angular/core';



@Directive({

  selector: '[charts]' // my directive name is charts

})

export class chartsDirective{



  constructor(@Inject('httpService') private httpService){}



  ngOnInit(){



    this.httpService.request({method: 'POST', url: '/browsers', params:params, headers: headers})

            .subscribe(

                data => self.data = data, //success

                error => console.log('error', error),

                () => {console.log('call finished')}

            )

  }

}

And lastly you justt need to add your httpService to provider of ngModule:

appModule.ts

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

import {ApiService} from ./api.service;



@NgModule({

    providers: [

        {provide : 'httpService', useClass : httpService}

    ]

})



export class apiModule{}

Now, You can use httpService anywhere in your code by injecting like we did in component.ts