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

Autor podstrony: Krzysztof Zajączkowski

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

Tytuł:

Angular. Profesjonalne techniki programowania. Wydanie IV

Autor:

Adam Freeman

Tytuł:

Angular. Programowanie z użyciem języka TypeScript. Wydanie II

Autor:

Yakov Fain, Anton Moiseev

Tytuł:

ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera

Autor:

Simone Chiaretta

Tytuł:

Angular instalacja i działanie. Nauka krok po kroku

Autor:

Shyam Seshadri

Tytuł:

Angular w akcji

Autor:

Jeremy Wilken

Tytuł:

ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera

Autor:

Valerio De Sanctis

Tytuł:

Angular. Profesjonalne techniki programowania. Wydanie II

Autor:

Adam Freeman

Tytuł:

Angular 2. Programowanie z użyciem języka TypeScript

Autor:

Yakov Fain, Anton Moiseev

Tytuł:

Angular 2. Tworzenie interaktywnych aplikacji internetowych

Autor:

Gion Kunz