Stronę tą wyświetlono już: 2218 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.