Dyrektywa ngClass

ngClass to dyrektywa Angulara umożliwiająca dynamiczne dodawanie lub usuwanie klas CSS na elementach HTML w zależności od stanu danych lub logiki aplikacji. Jest to bardzo przydatne narzędzie do kontrolowania prezentacji komponentów bezpośrednio z poziomu kodu TypeScript, co zwiększa elastyczność i możliwości dostosowania interfejsu użytkownika.

Jak działa ngClass

Dyrektywa ngClass może przyjmować różne formy wejścia:

• String: Jedna klasa lub wiele klas rozdzielonych spacjami.
• Array: Tablica nazw klas, które będą dodane, jeśli wartość jest prawdziwa.
• Object: Obiekt, gdzie klucze to nazwy klas, a wartości to wyrażenia logiczne (true/false); klasa jest dodawana, gdy wartość jest true.

Przykład użycia ngClass

Definicja Komponentu

Załóżmy, że tworzymy prosty komponent StatusComponent, który pokazuje różne klasy CSS w zależności od statusu użytkownika.

// status.component.ts
import { Component, CommonModule } from '@angular/core';

@Component({
  selector: 'app-status',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './status.component.html',
  styleUrls: ['./status.component.css']
})
export class StatusComponent {
  userStatus = 'active'; // Możliwe wartości: 'active', 'inactive', 'pending'
}

Szablon HTML z użyciem ngClass

W pliku status.component.html, użyjemy ngClass do zastosowania różnych klas w zależności od userStatus.

<!-- status.component.html -->
<div [ngClass]="{
  'active': userStatus === 'active',
  'inactive': userStatus === 'inactive',
  'pending': userStatus === 'pending'
}">
  Status: {{ userStatus }}
</div>

Stylowanie Komponentu

W pliku CSS możemy zdefiniować klasy, które będą stosowane przez ngClass.

/* status.component.css */
.active {
  color: green;
}
.inactive {
  color: red;
}
.pending {
  color: orange;
}