Angular: How to make a time signal in - html

Question

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 the component
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() {
}
}
This is the HTML
<div class="row">
<div class="small-12 medium-6 columns">
<span>Tiempo transcurrido</span>
<h5>{{tiempoTranscurrido | date:'mm:ss'}}</h5>
</div>
</div>
This is the service
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;
})
}
}
I would greatly appreciate your help.

Answer 1

I suggest you need something like this:
Service:
import { Injectable } from '#angular/core';
import { Observable } from 'rxjs';
#Injectable()
export class LightService {
getLight(interval): Observable<string> {
return Observable.interval(interval)
.timeInterval()
.map(time => {
if(time.value % 3 === 2) {
return 'green';
} else if(time.value % 3 === 0) {
return 'yellow';
} else if (time.value % 3 === 1) {
return 'red';
}
});
}
}
Component:
import { Component, OnInit } from '#angular/core';
import { LightService } from './light.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [ LightService ]
})
export class AppComponent implements OnInit {
light: string = "green";
constructor(private lightService: LightService) {}
ngOnInit() {
this.lightService
.getLight(10000) // 10 seconds interval
.subscribe(light => this.light = light);
}
}
Template:
<h1>
{{ light }}
</h1>
<ul>
<li *ngIf="light === 'green'" class="green"></li>
<li *ngIf="light === 'yellow'" class="yellow"></li>
<li *ngIf="light === 'red'" class="red"></li>
</ul>
Styles:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
width: 64px;
height: 64px;
border-radius: 50%;
border: 1px solid black;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
If you need to show lights only once add take operator:
import { Injectable } from '#angular/core';
import { Observable } from 'rxjs';
#Injectable()
export class LightService {
getLight(interval): Observable<string> {
return Observable.interval(interval)
.timeInterval()
.map(time => {
if(time.value % 3 === 2) {
return 'green';
} else if(time.value % 3 === 0) {
return 'yellow';
} else if (time.value % 3 === 1) {
return 'red';
}
})
.take(2);
}
}