Estoy desarrollando una aplicación en Angular y tengo un template que cuenta con una serie de inputs.
Dichos campos reciben mediante un @Input() valores desde una conexión con un broker de mensajería y los muestra en tiempo real al usuario.
Hasta aquí todo bien, el comportamiento que he de implementar implica cambiar el color de fondo de dichos inputs (de manera individual) mediante ciertas clases CSS en función de dos factores:
- El
<input>
ha de ponerse verde cuando comience a recibir valores del stream de datos - Ha de ponerse naranja cuando pasen 10 segundos sin haber recibido ningún dato
Había pensado en utilizar la directiva [ngClass]
de Angular para asignar dichas clases según el valor recibido por otro observable con el nombre de la clase a aplicar, asignado según uno de los 2 casos anteriores), algo así:
export class Component implements OnInit {
@Input() valor:number;
<input [className]="'status'"
type="text" [value]="valor" readOnly="true">
Las clases CSS ya están creadas pero requeriría ayuda en la parte de emitir el nombre de dicha clase en la suscripción al stream de datos. Adjunto a continuación una captura del servicio que se suscribe al flujo de datos y emite los valores para que se pueda ver más claro:
private valoresSource = new BehaviorSubject<number>(0);
public valores$ = this.valoresSource.asObservable();
this.client.onConnect = () => {
this.client.subscribe("/topic/nombreTopic" + param, e => {
//some checks
//Aquí se deberían hacer las comprobaciones para enviar un nombre de clase CSS u otro
this.valoresSource.next(e.body);
};
});
}
PD: Si fuera de utilidad para simplificar la solución cabe la posibilidad de añadir un campo a cada mensaje recibido por el stream con la hora actual (en ms).
Simulación en stackblitz: https://stackblitz.com/edit/angular-ivy-dkdzcp