Читать книгу Angular - Ferdinand Malcher - Страница 188

Genau genommen handelt es sich hierbei gar nicht um einen Sonderfall der Property Bindings, denn style ist tatsächlich eine native Eigenschaft eines jeden DOM-Elements. Das zeigt sich, wenn wir die Eigenschaft einmal auf der Konsole ausgeben (Abbildung 6–5). Hier sind die aktiven Style-Eigenschaften des Elements in einem Objekt hinterlegt. Die Werte setzen sich aus allen Styles zusammen, die auf das Element wirken, also Stylesheets, Inline-Styles und eigene Anpassungen über JavaScript. Mit einem Property Binding können wir diese Eigenschaften direkt überschreiben.

Abb. 6–5 CSSStyleDeclaration eines DOM-Elements

Die Direktive ngStyle

Für die Zuweisung von CSS-Eigenschaften zu einem Element können wir auch die Direktive ngStyle verwenden. Dabei übergeben wir der Direktive ein Objekt mit den zuzuweisenden CSS-Eigenschaften. Das Objekt kann direkt im Template angegeben werden oder auch in der Komponente hinterlegt sein:

<div [ngStyle]="{ color: myColor, padding: '10px' }"></div>

<div [ngStyle]="myStyles"></div>