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

Im Beispiel sind auf dem Element img die Attribute src und title gesetzt. Dadurch werden die gleichnamigen DOM-Propertys mit den angegebenen Daten gefüllt. Die Propertys können wir über das JavaScriptObjekt ändern.

Propertys ohne Attribute

Es ist nicht immer der Fall, dass ein Attribut ein Property mit demselben Namen beeinflusst. Es gibt auch Propertys, die nicht von einem Attribut geschrieben werden, sondern nativ auf dem Element existieren. Zum Beispiel besitzt das Element <p> die Eigenschaften textContent und innerHTML, die sich auf den Inhalt des Elements beziehen, aber nicht im HTML als Attribute gesetzt werden können. Andersherum gibt es Attribute, die keine Auswirkung auf ein Property haben.

Obwohl sie eng miteinander verzahnt sind, ist es wichtig, zwischen Attributen und Propertys eines Elements zu unterscheiden. Property Bindings werden eingesetzt, um die DOM-Propertys eines Elements zu ändern.

Zwischen den eckigen Klammern geben wir den Namen der Eigenschaft an, die wir setzen wollen. Als Wert für dieses »Attribut« wird immer ein Ausdruck angegeben. Für Property Bindings gibt es verschiedene Notationen, die im Wesentlichen alle dasselbe tun:

<element [property]="expression"></element>

Der Ausdruck expression wird ausgewertet, und der Rückgabewert in die DOM-Eigenschaft property geschrieben.

Attributschreibweise

Wollen wir einen String in eine Eigenschaft schreiben, können wir auch die Attributschreibweise verwenden. Es wird dann automatisch eine gleichnamige Eigenschaft angelegt.

<element property="value"></element>

Attribut und Interpolation

Für beide Schreibweisen 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.