Autor podstrony: Krzysztof Zajączkowski

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

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

<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:

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

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

<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ą:

<div [style.width.px]="width" [style.height.px]="height" [style.backgroundColor]="bkColor">Jakiś tekst</div>
Layout wykonany przez autora strony, wszelkie prawa zastrzeżone. Jakiekolwiek użycie części lub całości grafik znajdujących się na tej stronie bez pisemnej zgody jej autora surowo zabronione.