{{ myColor }}"></element>
Listing 6–24 Ansatz zum Setzen von CSS-Eigenschaften (funktioniert nicht)
Dieser Weg funktioniert allerdings nicht, denn es wird aus Sicherheitsgründen verboten, in dieses Attribut zu schreiben. An dieser Stelle helfen uns die Style Bindings. Wir setzen das Präfix style. ein und können mit einem Property Binding auf Style-Eigenschaften des Elements zugreifen:
<element [style.color]="myColor"></element>
Listing 6–25 Style Binding
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>
Listing 6–26 Die Direktive ngStyle verwenden
Ob wir Style Bindings oder ngStyle verwenden, hängt wieder vom Kontext und persönlichen Stil ab. Für einzelne Zuweisungen empfiehlt es sich, Style Bindings einzusetzen. Für komplexere Styles ist die Verwendung der Direktive übersichtlicher.
6.2.4DOM-Propertys in Komponenten auslesen
Wir können nun Daten an Eigenschaften von DOM-Elementen binden. Das funktioniert auch für Host-Elemente von Komponenten:
<my-component [myProperty]="'foo'"></my-component>
Listing 6–27 Property Binding auf dem Host-Element einer Komponente
Mit dem Property Binding schreiben wir den String foo in die DOM-Eigenschaft myProperty. Praktisch sinnvoll wird das Ganze dann, wenn wir die übergebenen Daten in der verknüpften Komponente MyComponent auslesen und verarbeiten können. Damit können wir Daten an Komponenten übermitteln, die im Komponentenbaum weiter unten liegen.
Dazu setzen wir in der Kindkomponente MyComponent das passende Property und verwenden den Decorator @Input():
import { Component, Input } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: './my.component.html'
})
export class MyComponent {
@Input() myProperty: string;
constructor() { }
}
Listing 6–28 Propertys auslesen mit dem @Input()-Decorator
Input-Propertys mit dem Decorator @Input()
Wir importieren zunächst den Decorator @Input() und versehen die Eigenschaft myProperty unserer Komponente damit. Nur wenn dieser Decorator vorhanden ist, können wir das Property mit einem Property Binding von außen beschreiben. Das Property enthält also nun den String foo, den wir auf dem Element <my-component> gesetzt haben.
Input-Propertys umbenennen
Die Komponenteneigenschaft trägt normalerweise immer denselben Namen wie das DOM-Property. In manchen Fällen ist es allerdings sinnvoll, nicht denselben Namen verwenden zu müssen. Wir können dem @Input()-Decorator als Argument deshalb den Namen des DOM-Propertys übergeben, an das wir binden wollen. Die Komponenteneigenschaft kann dann einen beliebigen Namen haben.
@Input('myProperty') myProp: string;
Listing 6–29 Input-Propertys umbenennen
Umbenennung vermeiden
Aber Achtung: Wenn wir die Bindings umbenennen, kann das Verwirrung stiften, weil die Namen unterschiedlich sind. Wir sollten diesen Weg also möglichst vermeiden und immer dieselben Namen verwenden. Das empfiehlt auch der Angular-Styleguide.
Achten Sie bitte darauf, die Input-Propertys immer korrekt zu typisieren. Geben wir keinen Typen an, wird dem Property implizit der Typ any zugewiesen, und wir können das Property dann nicht mehr typsicher verwenden.
6.2.5Den BookMonkey erweitern
Refactoring – Property Bindings
Um die Komplexität der Listenansicht zu verringern, soll eine Komponente geschaffen werden, die ein einzelnes Buch repräsentiert.
Jeder Listeneintrag der Bücherliste soll durch eine eigene Komponente repräsentiert werden.
Jedem Listenelement sollen die Daten eines Buchs übermittelt werden.
Im vorhergehenden Abschnitt haben wir ein Element der Listenansicht direkt im Template der Buchliste definiert. Das Listenelement war ein Link-Element <a>8, in dem die Buchinfos angezeigt wurden. Dieses Template war relativ komplex, deshalb ist es sinnvoll, dafür eine eigene Komponente zu verwenden.
Wir wollen in diesem Schritt das Listenelement aus der Buchliste in eine separate Komponente auslagern. Das Template der neuen Komponente entspricht einem Listenelement, wie es zuvor in der BookListComponent definiert war. Dadurch wenden wir das Prinzip der Verschachtelung von Komponenten an und erreichen eine bessere Modularität der Anwendung.
Abb.
