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

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

Listing 1
  1. <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:

Listing 2
  1. .style-class-name1 {
  2. font-weight: 800;
  3. font-size: 12px;
  4. }
  5. .style-class-name2 {
  6. font-size: 10px;
  7. }

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

Listing 3
  1. <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:

Listing 4
  1. table: string = ['style-class-name1' 'style-class-name2'];

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

Komentarze