Angular ti consente di impostare in modo condizionale sia le classi che gli stili tramite le direttive ngClass e ngStyle rispettivamente. Nel complesso, questi funzionano molto bene. Tuttavia, ci sono alcuni casi in cui non possono essere utilizzati, ad esempio per:

• lo stile dinamico degli elementi utilizzando variabili TypeScript che non sono note fino al runtime, oppure
• l’assegnazione di stili a pseudo-classi come focus e hover.

Le tecniche saranno dimostrate usando un applicazione che passa i colori del tema a un componente tramite @Ingresso parametri. Questi saranno usati per impostare il sfondo, passa il mouse, e messa a fuoco colori del bordo.

L’app demo

Ecco una schermata dell’app demo che mostra i tre colori che possono essere impostati dinamicamente tramite i campi di input:

Ogni colore è mostrato in un quadrato sopra il modulo per riferimento. Sotto il modulo troverai un SVG del noto logo di Twitter. Possiamo vedere il colore selezionato al passaggio del mouse quando il cursore viene posizionato sull’immagine:

La tabulazione sull’immagine cambia il bordo nel colore del Focus Border Color selezionato:

Dei tre colori, solo lo sfondo può essere impostato utilizzando una direttiva Angular; gli altri due richiedono una soluzione diversa, come quelle sotto.

Tecnica #1: Variabili CSS

Forse hai familiarità con le variabili Less e Sass che vengono compilate in puro CSS prima dell’uso. Ora, ci sono variabili CSS “pure”. Questi sono definiti anteponendo un doppio trattino (–) prima del nome della variabile. Quindi, per accedere al valore di una variabile CSS, la passeremmo a variabile() funzione. La nostra app dichiara tre di queste variabili, una per ogni definizione di colore:

Questi sono utilizzati per impostare i tre quadrati di anteprima nel Componente dell’app.

$backgroundColor: var(--background-color);
$hoverColor: var(--hover-color);
$focusBorderColor: var(--focus-border-color);

Queste variabili vengono applicate alle regole CSS come segue:

.background {
  background-color: $backgroundColor;
}

.hover-background {
  background-color: $hoverColor;
}

.focus-border-background {
  background-color: $focusBorderColor;
}

Se la variabile() la funzione sembra familiare, questo è di progettazione. Prende il nome dalla parola chiave di dichiarazione della variabile JavaScript (JS). Questo perché possiamo fare riferimento (e modificare!) Le variabili CSS dal nostro codice JS o, nel caso di applicazioni Angular, all’interno di TypeScript .ts file dei componenti. Ecco la funzione che assegna tre variabili JS alle variabili CSS sopra che abbiamo dichiarato in precedenza:

public setColors(background: string, hover: string, focus: string) {
  const docStyle = document.documentElement.style;
  docStyle.setProperty('--background-color', background);
  docStyle.setProperty('--hover-color', hover);
  docStyle.setProperty('--focus-border-color', focus);
}

Il setColors() la funzione è legata all’evento click del APPLICARE pulsante. Ogni campo di input ngModel variabile viene passata come parametro di funzione:

<div class="content">
  <input type="text" [(ngModel)]="backgroundColor"> 
</div>
<div class="content">
  <input type="text" [(ngModel)]="hoverColor">
</div>
<div class="content">
  <input type="text" [(ngModel)]="focusBorderColor"> 
</div>

<button class="apply-button" (click)="setColors(backgroundColor, hoverColor, focusBorderColor)">
    APPLY  
</button>

Sebbene non faccia parte della demo, va notato che le variabili CSS sono ugualmente applicabili alle pseudo-classi poiché il foglio di stile ha accesso alle variabili:

.news-image: hover {
  background-color: $hoverColor;
}

Tecnica n. 2: impostare gli stili in modo programmatico

Tutti gli elementi HTML espongono una proprietà di stile, che ci consente di impostare direttamente qualsiasi stile, senza fare alcun riferimento al foglio di stile. Nel componente feed, ci sono due metodi simili per impostare gli stili degli elementi SVG: uno per il colore di sfondo e un altro per il bordo dello stato attivo:

public setHoverColor(event: MouseEvent) {
  const newsImage: HTMLDivElement = <HTMLDivElement>event.target;

  if (event.type === 'mouseenter') {
    newsImage.style.backgroundColor = this.hoverBackgroundColor;
  } else if (event.type === 'mouseleave') {
    newsImage.style.backgroundColor = this.backgroundColor;
  }
}

public setFocusStyle(event: FocusEvent) {
  const newsImage: HTMLDivElement = <HTMLDivElement>event.target;

  if (event.type === 'focus') {
    newsImage.style.outline = "2px solid " + this.focusBorderColor;
  } else if (event.type === 'blur') {
    newsImage.style.outline = "none";
  }
}

Le variabili membro della classe di cui sopra possono essere impostate tramite @Ingresso parametri; in caso contrario, mantengono i loro valori predefiniti:

export class FeedComponent {
  @Input('background-color') 
  backgroundColor: string = 'rgb(82, 172, 240)';
  @Input('hover-background-color') 
  hoverBackgroundColor="cyan";
  @Input('focus-border-color') 
  focusBorderColor="#CCCCCC";
  
}

Ogni tipo di evento controlla che le due funzioni corrispondano a un evento associato all’elemento news-image. In ogni caso, l’evento $ viene passato alla funzione per ottenere il tipo di evento e il target:

<div 
  tabindex="0"
  class="news-image"
  style="background-position: center; background-size: cover"
  [style.backgroundColor]="backgroundColor"
  (mouseenter)="setHoverColor($event)"
  (mouseleave)="setHoverColor($event)"
  (focus)="setFocusStyle($event)"
  (blur)="setFocusStyle($event)"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 720.18 585.15"
    style="padding: 0.5rem"
  >
  // ...
  </svg>

Passare i colori al componente di alimentazione

Per attivare gli aggiornamenti del colore sull’evento clic del pulsante APPLICA (anziché immediatamente), vengono utilizzate tre variabili aggiuntive. Questi sono impostati contemporaneamente alle variabili CSS in setColors():

backgroundColorInput: string = 'rgb(82, 172, 240)';
hoverColorInput: string = 'blue';
focusBorderColorInput: string = 'darkgray';
  
public setColors(background: string, hover: string, focus: string) {
  const docStyle = document.documentElement.style;
  docStyle.setProperty('--background-color', background);
  this.backgroundColorInput = background;
  docStyle.setProperty('--hover-color', hover);
  this.hoverColorInput = hover;
  docStyle.setProperty('--focus-border-color', focus);
  this.focusBorderColorInput = focus;
}

In questo modo, le variabili di input del componente feed sono legate alle nuove variabili e non a quelle dei campi di testo. ngModelli:

<feed-component 
  [background-color]="backgroundColorInput"
  [hover-background-color]="hoverColorInput"
  [focus-border-color]="focusBorderColorInput"
>
</feed-component>

Non dimenticare di dare un’occhiata alla demo su stackblitz.

Leggi di più CSS e tutorial di web design.

Conclusione

In questo tutorial, abbiamo appreso due tecniche per lo styling dinamico degli elementi in cui il ngClass e ngStyle le direttive non funzioneranno. Nel prossimo articolo, impareremo come applicare le variabili CSS a elementi specifici.