How to make a time signal in angular2 : I need to make a traffic light that from 0 to 10 minutes is green from 10 to 20 yellow and from 20 to 30 red, time is by service

So far this is my code

This is service

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    import {
      Component,
      OnInit,
      Input
    } from '@angular/core';
    import {
      TiempoService
    } from "app/servicios/tiempo.service"

    @Component({
      selector: 'app-menu',
      templateUrl: './menu.component.html',
      styleUrls: ['./menu.component.css']
    })
    export class MenuComponent implements OnInit {

      @Input() tiemposervice: TiempoService;
      constructor() {}

      ngOnInit() {


      }


    }

<!-- end snippet -->

This is HTML

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <div class="row">
      <div class="small-12 medium-6 columns">
        <span>Tiempo transcurrido</span>
        <h5>{{tiempoTranscurrido | date:'mm:ss'}}</h5>
      </div>
    </div>

<!-- end snippet -->

This is component 

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    import {
      Injectable
    } from '@angular/core';
    import Rx from 'Rx';

    @Injectable()
    export class TiempoService {

      tiempoTranscurrido: number;


      constructor() {}

      ngOnInit() {

      }
      tiempoTotal() {
        Rx.Observable.interval(1000).subscribe(segundos => {
          this.tiempoTranscurrido = segundos * 1000;
        })
      }
    }

<!-- end snippet -->

I would greatly appreciate your help.