Dyrektywa ngStyle

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