Angular - przełączanie klas styli za pomocą dyrektywy ngClass

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 1918 razy

Dyrektywa ngClass umożliwia sterowanie dynamicznym podpinaniem wielu klas do jednego elementu HTML za pomocą warunku sterującego. Składnia tej dyrektywy jest następująca:

<div [ngClass]="{ 'style-class-name1': condition1, 'style-class-name2': condition2 }">Jakiś tekst</div>

Oczywiście, aby zobaczyć jakiś rezultat w pliku z stylami należy umieścić klasy:

.style-class-name1 { font-weight: 800; font-size: 12px; } .style-class-name2 { font-size: 10px; }

Możliwe jest również dynamiczne wiązanie tablicy klas za pomocą ngClass w sposób następujący:

<div [ngClass]="table">Jakiś tekst</div>

Oczywiście w kodzie klasy komponentu teraz można stworzyć sobie tablicę klas styli, które zostaną podpięte pod element HTML:

table: string = ['style-class-name1' 'style-class-name2'];

Nic nie stoi na przeszkodzie teraz, aby sterować tym, jaka klasa będzie przełączana.

Propozycje książek