smartclient/src/app/ledindicator/ledindicator.component.ts

import { Component, Input, OnInit } from '@angular/core'
import { MqttclientService } from '../mqttclient.service'

@Component({
  selector: 'app-ledindicator',
  template: `
  <div [ngStyle]="{'text-align':'center'}">
    {{ledId}}<br/>
    <span [ngStyle]="{'color':color, 'font-size':'200%'}">&#x25cf;</span>
  </div>  
  `
})
export class LedindicatorComponent implements OnInit {

  @Input() topic : string = 'invalid'
  @Input() ledId : string = 'invalid'
  color : string = 'red'


  constructor(private mqttclientService : MqttclientService) { 
  }

  ngOnInit() {
    this.mqttclientService.register(this.topic, (message: string) => {
      if (message == 'ON') {
        this.color = 'green'
      } else if (message == 'OFF') {
        this.color = 'red'
      } else {
        this.color = 'lightgrey'
      }
    })
  }

}