redlight.ts

import { Component, OnInit, signal } from '@angular/core';

interface LightColor {
  id: number;
  name: string;
  hex: string;
}

const template = `
<h1>light demo </h1>
<div [style.backgroundColor]= 'color().hex' 
[style.height.px]="height"
[style.width.px]="width">
hello
</div>
`
@Component({
  selector: 'app-root',
  template : template
})
export class App implements OnInit {

  protected title = 'light demo';
  height = 100;
  width = 100; 
  lightColors: LightColor[] = [
    { id: 0, name: 'Red', hex: '#FF0000' },
    { id: 1, name: 'Yellow', hex: '#FFFF00' },
    { id: 2, name: 'Green', hex: '#00FF00' }
  ]
  color = signal(this.lightColors[0]);

  constructor(){
  setInterval(() => {
      if (this.color().id === 0) {
         this.color.set(this.lightColors[1]);
         setTimeout(() => {
           this.color.set(this.lightColors[2]);
         }, 5000);
      }

      else if (this.color().id === 2) {
        this.color.set(this.lightColors[1]);
        setTimeout(() => {
          this.color.set(this.lightColors[0]);
        }, 5000);
      }

    }, 10000);
  }

  ngOnInit(): void {
  
  }
}