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:
- <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
- <div [style.width.px]="width" [style.height.px]="height" [style.backgroundColor]="bkColor">Jakiś tekst</div>

Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman

Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev

Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta

Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri

Tytuł:
Angular w akcji
Autor:
Jeremy Wilken

Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis

Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman

Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev

Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz