// service.ts

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

import { Http } from '@angular/http';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';

@Injectable()

export class FoodService {

  constructor(

    private http: Http,

    private api: string

  ) {

    console.log(this.api);

  }

  getFood(): Observable<any[]> {

    return this.http.get(this.api)

      .map(response => response.json());

  }

}

import { Component, OnInit } from '@angular/core';

import { Http } from '@angular/http';

import { Observable } from 'rxjs/Observable';

import { FoodService } from '../food.service';

interface Drink {

  name: string,

  price: number

}

export function DrinkFactory(http) {

  return new FoodService(http, '/api/drinks');

}

@Component({

  selector: 'drink-viewer',

  providers: [

    {

      provide: FoodService,

      useFactory: DrinkFactory,

      deps: [

        Http

      ]

    }

  ],

  template: `

    <div>

      <div *ngFor="let item of items$ | async">

        {{ item.name }} {{ item.price | currency:'USD':true }}

      </div>

    </div>

  `

})

export class DrinkViewerComponent implements OnInit {

  items$: Observable<Drink[]>;

  constructor(private foodService: FoodService) {}

  ngOnInit() {

    this.items$ = this.foodService.getFood();

  }

}