Angular - dyrektywa ngStyle i dynamiczne modyfikowanie styli elementu HTML

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

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

Listing 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

bkColor: string = 'yellow';
fontColor: string = 'red';

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

Listing 3

<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