TypeScript customize a traffic light management button Angular

 

Tramite tecnologia Angular ed il linguaggio di programmazione TypeScript, vedremo in questo breve articolo, come possiamo estendere e personalizzare un pulsante HTML, impostandolo come la gestione semaforica.

Il pulsante sarà tondo, che per ogni click avrà un determinato colore e testo, il tutto come mostrato nella figura precedente.

Dopo aver creato un nuovo progetto, oppure aperto uno esistente, di tipo Angular TypeScript, nella pagina html, component, dove vogliamo visualizzare il pulsante, scriviamo il codice HTML per il pulsante.

Di seguito si riporta il frammento di codice delle suddette operazioni.

HTML

<button id="multiStateBtn" class="stile-button">Completato</button>

 

Ora, dobbiamo impostare lo stile iniziale ed uno formattazione che permette di impostare la forma tonda al pulsante, nel file di tipo SCSS, impostiamo lo stile.

Di seguito si riporta il codice per il file SCSS.

SCSS

#multiStateBtn {

  background: green;

}

.stile-button {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  overflow: hidden;

  cursor: pointer;

  border: none;

  padding: 0;

}

 

Terminata la parte per impostare la formattazione e stile, dobbiamo creare un interfaccia nel linguaggio TypeScript, che tramite due proprietà, avrà il compito di impostare il testo ed il colore al pulsante.

Di seguito si riporta il codice per il linguaggio TypeScript, per il file .ts

TypeScript:

interface ButtonState {

  label: string;

  color: string;

}

 

Nell'evento "NgOnInit"  della pagina, impostiamo il codice per gestire l'evento click del pulsante, che per ogni click, cambierà colore e testo al pulsante.

Di seguito si riporta il frammento di codice delle suddette operazioni.

TypeScript:

 ngOnInit(): void {

 

const btnState: ButtonState[] = [

    {

      label: 'Completato',

      color: 'green'

    },

    {

      label: 'In lavorazione',

      color: 'yellow'

    },

    {

      label: 'Annullato',

      color: 'red'

    }

  ];

   const btn = document.querySelector<HTMLButtonElement>('#multiStateBtn')!;

   let index = 1;

   btn.addEventListener('click', function() {

    if (index > 2) {

      index = 0;

    }

    btn.innerHTML = btnState[index].label;

    btn.style.backgroundColor = btnState[index].color;

    index++;

  });

 

 

 

}

 

 

Conclusioni

L'articolo ha voluto fornire al lettore, una tecnica per personalizzare pulsanti html, nel linguaggio TypeScript e nella tecnologia Angular. Le potenzialità offerte da questo linguaggio, permettono con poche righe di codice, di estendere vari controlli.