Angular - instalacja niezbędnego oprogramowania
Angular - tworzenie pierwszego projektu
Angular - automatyczne generowanie kodu za pomocą polecenia ng
Angular - podstawowe typy zmiennych
Angular - interfejsy
Angular - klasy
Angular - klasy abstrakcyjne w TypeScript-cie
Angular - moduły, komponenty oraz dyrektywa ngModel
Angular - przełączanie klas styli za pomocą dyrektywy ngClass
Angular - dyrektywa ngStyle i dynamiczne modyfikowanie styli elementu HTML
Angular dynamiczne sterowanie atrybutami elementu HTML
Angular - dyrektywy strukturalne ngIf, ngFor i ngSwitch
Angular - przesyłanie danych do i z komponentu za pomocą dekoratorów Input, Output i klasy EventEmmiter
Angular - haki cyklu życia komponentu (lifecycle hooks)
Angular - tworzenie własnych dyrektyw
Angular- wykorzystanie wbudowanych i deklarowanie własnych pipe-ów
Angular - sterowanie kontrolkami, walidacja i tworzenie formularzy z użyciem dyrektywy ngModel
Angular - sterowanie kontrolkami, walidacja oraz tworzenie formularzy z wykorzystaniem FormControl i FormGroup z modułu ReactiveForms
Angular - dekorator ViewChild i odwoływanie się do elementów html w kodzie klasy komponentu
Angular - dekorator HostListener czyli podpinanie się pod zdarzenia komponentu
Angular - routing
Angular - tworzenie serwisów i wstrzykiwanie zależności
Angular - blokowanie dostępu do ścieżki
Angular - tworzenie lokalnego serwera na potrzeby serwisów
Angular - asynchroniczne wykonywanie kodu za pomocą typu Promise
Angular - typ Observable
Angular - typ BehaviorSubject
Angular - komunikacja z serwerem za pomocą HttpClient
Angular - operatory RxJs
Angular - async pipe czyli asynchroniczne wykonanie zapytania do serwera
Angular - resolver czyli ładowanie zanim jeszcze na dobre wlazłeś do komponentu
Angular - wstrzykiwanie treści do komponentu z wykorzystaniem projekcji
Angular material - implementacja własnych mat ikon
Angular material - wyświetlanie danych z wykorzystaniem tablic materialowych
Angular - publikowanie projektu w sieci
Angular - (lazy-loading) dynamicznie doładowywane moduły
Ta strona należy do działu:
poddziału
Autor podstrony: Krzysztof Zajączkowski
Stronę tą wyświetlono już: 2149 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.
