gibt es alternative Formen. Wir können die beiden oben genannten Notationen mischen und einen Ausdruck mit der Interpolation in ein Attribut schreiben. Dieser Weg ist identisch zu dem ersten Beispiel.
<element property="{{ expression }}"></element>
Genauso können wir auch Strings als Ausdruck angeben, indem wir sie in Anführungszeichen setzen. Diese Form ist äquivalent zum zweiten Beispiel.
<element [property]="'value'"></element>
Beispiele für Property Bindings
Zur Veranschaulichung gibt es hier einige Beispiele:
<img [src]="myUrl" [title]="myTitle">
Quelle und Titel für das Bild werden aus den Eigenschaften myUrl und myTitle der Komponente bezogen.
<button [disabled]="isDisabled">MyButton</button>
Der Button wird deaktiviert, wenn die Eigenschaft isDisabled der Komponente wahr ist.
<p [textContent]="'FooBar'"></p>
Der Text des <p>-Elements wird auf den Wert FooBar gesetzt.
<my-component [foo]="1+1"></my-component>
Die Eigenschaft foo der Komponente MyComponent wird auf Wert 2 gesetzt. Der Ausdruck 1+1 wird vor der Übergabe ausgewertet.
Grundsätzlich möchten wir Ihnen empfehlen, für reine Strings immer die Attributschreibweise zu verwenden und für Ausdrücke die Variante mit eckigen Klammern.
Propertys, Propertys, Propertys, …
Die Begriffe Property und Eigenschaft werden synonym verwendet. Es ist allerdings Vorsicht geboten, um die verschiedenen Verwendungen nicht durcheinanderzubringen:
DOM-Propertys sind Eigenschaften, die einem DOM-Element angehören. Sie sind Bestandteile des DOM-Baums und damit jeder HTML-Seite. Mit Property Bindings können wir in diese Eigenschaften schreiben.
Komponenten-Propertys sind alle Eigenschaften, die innerhalb der TypeScript-Klasse einer Komponente deklariert sind. Im Template der Komponente können wir diese Propertys in Ausdrücken verwenden, z. B. mit der Interpolation: {{ myProperty }}. Es sind damit immer die Eigenschaften der Komponente gemeint, in deren Template wir uns befinden.
Wir sprechen in diesem Buch in beiden Fällen von Propertys/Eigenschaften. Hier müssen wir Acht geben, um die beiden Konzepte nicht zu verwechseln!
6.2.3Andere Arten von Property Bindings
Property Bindings können wir für noch viel mehr verwenden, als nur einfache Eigenschaften auf Elementen zu setzen. Es existieren drei Sonderformen, mit denen wir Elemente manipulieren können. Alle drei funktionieren wie Property Bindings, wir fügen allerdings ein Präfix an.
Attribute Bindings: Setzen von Attributwerten [attr.colspan]
Class Bindings: Zuweisen von CSS-Klassen [class.myCssClass]
Style Bindings: Hinzufügen von CSS-Stilen [style.color]
Attribute Bindings
Attribute ohne Propertys
Wir haben gelernt, dass wir den Wert von Attributen nicht mit Property Bindings ändern können. Es gibt allerdings Attribute, die keine zugehörige DOM-Eigenschaft haben. Dazu gehören zum Beispiel alle aria-Attribute für Barrierefreiheit und auch die Attribute colspan und rowspan.
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
