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

  ) {

  }

  getSides(): Observable<any[]> {

    return this.http.get('/api/sides')

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

  }

  getPizzas(): Observable<any[]> {

    return this.http.get('/api/pizzas')

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

  }

  getDrinks(): Observable<any[]> {

    return this.http.get('/api/drinks')

      .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 abstract class DrinkService {

  getDrinks: () => Observable<Drink[]>;

}

@Component({

  selector: 'drink-viewer',

  providers: [

    { provide: DrinkService, useExisting: FoodService }

  ],

  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: DrinkService) {}

  ngOnInit() {

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

  }

}