Hier können wir also keine normalen Property Bindings einsetzen, um die Werte zu verändern und dynamisch zu setzen, denn es gibt ja kein Property, das wir verändern können. Stattdessen gibt es die Attribute Bindings, mit denen wir die Attribute schreiben können. Wir verwenden das Präfix attr. und können den Wert eines Attributs direkt im HTML verändern.
<td [attr.colspan]="myColspan"></td>
<a [attr.role]="myRole">Link</a>
Listing 6–20 Attribute Binding
Class Bindings
Mit Class Bindings können wir CSS-Klassen auf ein Element anwenden. Die Zuweisung wird an eine Bedingung geknüpft: Nur wenn der angegebene Ausdruck wahr ist, wird die Klasse überhaupt angewendet.
Wir schreiben das Präfix class. gefolgt vom Klassennamen und geben den Ausdruck an, der geprüft wird.
<element [class.myClass]="hasMyClass"></element>
Listing 6–21 Class Binding
Im Beispiel wird dem Element element die CSS-Klasse myClass zugewiesen, falls die Komponenteneigenschaft hasMyClass wahr ist.
Die Direktive ngClass
Um CSS-Klassen auf ein Element anzuwenden, können wir auch die Direktive ngClass einsetzen. Welchen Weg wir wählen, hängt vom Kontext ab. ngClass empfiehlt sich dann, wenn wir mehrere CSS-Klassen zuweisen wollen. Wir können dann in einem einzigen Ausdruck alle Klassen und ihre jeweiligen Bedingungen angeben:
<div [ngClass]="{ active: isActive, 'has-error': hasError, disabled: isDisabled, myClass: hasMyClass }"></div>
Listing 6–22 Mehrere CSS-Klassen setzen mit der Direktive ngClass
Dieses Snippet können wir auch mit Class Bindings notieren. Der Code wird dann allerdings länger und unübersichtlicher. ngClass ist dafür also die bessere Wahl. Class Bindings sollten wir nur dann verwenden, wenn wir einzelne CSS-Klassen zuweisen möchten.
<div [class.active]="isActive" [class.has-error]="hasError" [class.disabled]="isDisabled" [class.myClass]="hasMyClass"></div>
Listing 6–23 Mehrere CSS-Klassen setzen mit Class Bindings
Style Bindings
Wenn wir einem Element einen CSS-Stil zuweisen wollen, können wir das Attribut style verwenden und das CSS inline notieren. Wenn wir den Wert für eine Style-Definition dynamisch wählen wollen, scheint die folgende Idee plausibel zu sein:
<!-- Achtung: funktioniert nicht! -->
<element style="color: {{ 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