In questo articolo vedremo come creare un pulsante nel linguaggio di programmazione TypeScript, con tecnologia Angular, per renderlo di tipo semaforico.
In particolare, si crea un pulsante che al click cambia colore e testo, con i tre valori (verdi, giallo e rosso) di un semaforo, il tutto come mostrato nella figura precedente.
Il pulsante, sarà tondo, e per ogni click cambierà colore e testo.
Dopo aver creato un nuovo progetto in Angular e TypeScript, oppure aperto un progetto esistente, scriviamo nella parte html il codice per il pulsante.
Di seguito il frammento del codice html.
HTML
<button id="multiStateBtn" class="stile-button">Completato</button>
Applichiamo uno stile iniziale al pulsante, oltra alla formattazione da renderlo tondo.
Di seguito il codice per il file di stile (SCSS) per formattare il pulsante.
SCSS
#multiStateBtn {
background: green;
}
.stile-button {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
border: none;
padding: 0;
}
Ora non resta che scrivere il codice TypeScript per cambiare il colore ed il testo del pulsante.
Si crea un'interfaccia con due proprietà di tipo testo, che permettono di gestire il colore ed il testo.
Di seguito il codice TypeScript delle suddette operazioni.
TypeScript:
interface ButtonState {
label: string;
color: string;
}
Nell'evento "NgOnInit" scriviamo il codice per impostare i vari stati e gestire l'evento click del pulsante, tramite un gestore di evento, che per ogni click cambia colore e testo.
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++;
});
}
Ora non resta che eseguire il nostro progetto, per vedere il risultato di questa implementazione.
Conclusioni
L'articolo ha voluto fornire al lettore, una tecnica per la gestione dei pulsanti. In particolare, le potenzialità offerte dalla tecnologia Angular e dal linguaggio di programmazione TypeScript, che permettono di estendere i controlli html, con funzionalità ed aspetti grafici con poco codice e semplicità.