Angular - dyrektywa ngStyle i dynamiczne modyfikowanie styli elementu HTML

Stronę tą wyświetlono już: 19 razy

Dyrektywa ngStyle umożliwia dynamiczne modyfikowanie styli danego elementu HTML. Oto przykład wykorzystania tejże dyrektywy:

Listing 1
  1. <div [ngStyle]="{ 'background-color': bkColor, 'color': fontColor }">Jakiś tekst</div>

żeby powyższy kod działał poprawnie w kodzie klasy komponentu koniecznie należy utworzyć zmienne bkColor i fontColor, które oczywiście będą sterowały zmianą koloru czcionki i tła elementu HTML:

Listing 2
  1. bkColor: string = 'yellow';
  2. fontColor: string = 'red';

Możliwe jest również sterowanie stylami z wykorzystaniem atrybutu style np. w taki sposób:

Listing 3
  1. <div [style.color]='fontColor' [style.bkColor]='bkColor'>Jakiś tekst</div>

Sterowanie właściwościami takimi jak szerokość, czy wysokość wymaga podania jednostki. Bez tego przeglądarka nie będzie w stanie poprawnie wyświetlić elementu HTML. Problematycznym byłoby trzymanie wielkości opisujących wymiary wraz z jednostką w formacie tekstu. Dlatego też Angular przychodzi tu z odsieczą:

Listing 4
  1. <div [style.width.px]="width" [style.height.px]="height" [style.backgroundColor]="bkColor">Jakiś tekst</div>

Komentarze