ngStyle to dyrektywa Angulara umożliwiająca dynamiczne dodawanie stylów CSS do elementów HTML w Twoim komponencie. Jest to szczególnie przydatne w aplikacjach, gdzie styl elementu zależy od danych lub stanu aplikacji, pozwalając na bardziej interaktywne i dynamiczne zachowania interfejsu użytkownika.
Jak działa ngStyle
Dyrektywa ngStyle pozwala na przekazywanie obiektu zawierającego właściwości CSS i ich wartości, które chcesz zastosować do danego elementu HTML. Klucze obiektu są nazwami właściwości CSS, a wartości to wartości tych właściwości, które można dynamicznie zmieniać w logice komponentu.
Przykład użycia ngStyle
Definicja Komponentu
Załóżmy, że tworzymy komponent DynamicStyleComponent, który zmienia tło w zależności od stanu aplikacji.
// dynamic-style.component.ts
import { Component, CommonModule } from '@angular/core';
@Component({
selector: 'app-dynamic-style',
standalone: true,
imports: [CommonModule],
templateUrl: './dynamic-style.component.html',
styleUrls: ['./dynamic-style.component.css']
})
export class DynamicStyleComponent {
bgColor = '#ff0000'; // początkowy kolor tła
}Szablon HTML z użyciem ngStyle
W pliku dynamic-style.component.html, użyjemy ngStyle do dynamicznego ustawienia koloru tła elementu <div>.
<!-- dynamic-style.component.html -->
<div [ngStyle]="{'background-color': bgColor}">
Dynamicznie zmieniany kolor tła!
</div>
Stylowanie i Logika
W tej części nie potrzebujemy dodatkowego pliku CSS, ponieważ style są generowane dynamicznie. Jednak możesz dodać dodatkowe style, jeśli potrzebujesz. Logika zmiany koloru może być na przykład związana z jakimś zdarzeniem lub pobieraniem danych z zewnętrznego źródła.
Użycie Komponentu
Ponieważ DynamicStyleComponent jest komponentem standalone, możesz go używać bezpośrednio w innych komponentach lub w routingach, importując go tam, gdzie jest potrzebny.
import { DynamicStyleComponent } from './path/to/dynamic-style.component';
// i teraz możesz użyć `app-dynamic-style` w szablonie innego komponentu