Angular la gestione dello stile

Si riporta l'articolo scritto per il sito https://www.iprogrammatori.it/articoli/javascript/art_angular-la-gestione-dello-stile-_1858.aspx

In questo nuovo articolo sulla tecnologia Angular, utilizzando il linguaggio di programmazione TypeScript, vedremo come gestire l’aspetto grafica delle varie pagine, in particolare lo Style.

Tramite alcune tecniche e classi, possiamo impostare uno stile ad un controllo o riferimento tag html in maniera anche dinamica. L’articolo vuole fornire quella conoscenza di base sufficiente a poter gestire in vari progetti l’aspetto grafico delle varie pagine html.

Utilizzeremo come ambiente di sviluppo Visual Studio Code, anche se va bene qualsiasi strumento (editor) per la gestione dei siti con Angular.

Lo stile statico e dinamico

Dopo aver creato un progetto in Angular, nel file app.component.html, impostiamo un div con del testo con il colore del testo verde.

Di seguito il frammento di codice delle suddette operazioni.

HTML

 <div style="color: greenyellow;">titolo</div>

Se invece abbiamo la necessita di impostare il colore del testo in base ad un valore, possiamo verificare se una variabile è uguale ad un certo  valore ed in base a tale valore impostare un colore.

Di seguito un esempio che verifica se la variabile è uguale al valore 0, imposta un colore, altrimenti altro colore al testo.

 TypeScript:

export class AppComponent {

  public indice: number = 4;

 

}

 

HTML.

 <div [style]="indice == 0 ? 'color: greenyellow' : 'color: blue' ">titolo2</div>

Ora non resta che testare il nostro frammento di codice per verificare il testo cambiare di colore in base alla variabile.

Nel frammento di codice precedente, abbiamo impostato uno stile (il colore del testo) in base al valore di una variabile. Il testo avrà un colore diverso a seconda del valore.

Altra tecnica per impostare dinamicamente lo stile di un elemento html nella pagina, è quello di utilizzare il singolo attributo. Di seguito si riporta un frammento di codice, con il quale si imposta il colore del carattere utilizzando proprio l’attributo Color visto nel frammento di codice precedente.

HTML

  <div [style.color]="indice == 4 ? 'red' : 'green' ">titolo3</div>

Se invece abbiamo la necessità di impostare il colore tramite una funzione ed in base al parametro restituire un certo risultato, tale tecnica è possibile aggiungere il nome della funzione.

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

HTML:

 <div [style.color]="getColore(5)">titolo4</div>

 

 

TypeScript:

public getColore(parametro: number) : string {

 let  returnColore: string = 'Orange';

 

  if(parametro==5)

  returnColore = 'Black';

 

  return returnColore;

 

}

 

La direttiva NgStyle

Altra tecnica per impostare il colore ad un elemento della pagina html, è quello di utilizzare la Direttiva “NgStyle” una parola chiave di Angular che permette di applicare un suo stile.

Il frammento di codice qui di seguito, imposta il colore del testo se una variabile rispetta una condizione, altrimenti altro colore del testo .

HTML:

  <div [ngStyle]="indice==7 ? { color: 'pink'} : { color: 'darkgreen'}" >Titolo 5</div>

 

TypeScript:

public indice: number = 7;

 Altra tecnica è quella di passare ad una variabile il valore che si vuole impostare ad un attributo dello stile.

Di seguito il frammento di codice delle suddette operazioni.

HTML:

<div [ngStyle]="{color: stile}" >Titolo 6</div>

 

TypeScript:

  public stile: string = "red";

 

La direttiva NgClass

Con questa direttiva, ossia parola chiave, possiamo applicare uno stile ad un elemento html.

Si crea nel file di tipo “.css” per esempio app.component.css, due stili, che impostano due colori al testo.

Di seguito il frammento di codice di tale dichiarazione.

CSS:

.testo-rosso {

  color:red;

}

.testo-blue {

  color:blue;

}

 

Nel file TypeScript, scriviamo una variabile con il quale assegneremo il nome dello stile, che vogliamo applicare ad un elemento della pagina.

Di seguito il frammento di codice delle suddette operazioni.

TypeScript:

export class AppComponent {

 

  public stileClasse: string = "testo-rosso";

 

Nel file html, tramite la direttiva NgClass, applichiamo la variabile.

HTML:

<div [ngClass]="stileClasse" >Titolo 7</div>

 

 Conclusioni

L’articolo ha fornito una panoramica sulla gestione della grafica nelle varie tecniche utilizzando il linguaggio di programmazione TypeScript e la tecnologia Angular. I vari esempi e scenari permettono al programmatore di adottare una tecnica adeguata e soprattutto conoscere le possibilità e strategie da applicare nella creazione della propria applicazione.

Angular e TypeScript nella loro versatilità offrono al programmatore diverse possibilità di gestire gli aspetti grafici dei singoli elementi della pagina.