Angular. Ferdinand Malcher

      Abb. 6–4 Datenfluss von Eltern zu Kind mit Property Bindings

       DOM-Eigenschaften

      Dazu schauen wir uns zunächst an, was DOM-Propertys sind. Jeder Knoten im DOM-Baum ist ein Objekt. Wie jedes andere JavaScript-Objekt kann auch ein DOM-Element Eigenschaften und Methoden besitzen. Diese Eigenschaften können wir mit JavaScript auslesen und verändern:

      const myImg = document.getElementById('myImg');

      myImg.src = 'angular.png';

      myImg.style.border = '1px solid black';

      Listing 6–18 DOM-Eigenschaften mit JavaScript schreiben

      Wir können nicht nur die nativen Propertys verwenden, sondern beliebige eigene Eigenschaften in ein DOM-Element schreiben, denn es ist ja ein einfaches JavaScript-Objekt.

       Unterschied zwischen Attributen und DOM-Propertys

      DOM-Eigenschaften haben aber keine Auswirkung auf das HTML. Das bedeutet, dass der HTML-Quelltext sich nicht verändert, wenn wir ein DOM-Property ändern. Darin unterscheiden sie sich von Attributen: Attribute werden im HTML notiert und liegen immer als Text vor. Sie werden einmal festgelegt und ändern sich dann während der Laufzeit nicht. In den meisten Fällen schreiben Attribute aber einen Wert in ein DOM-Property.

      <img src="angular.png" title="Angular">

      Listing 6–19 HTML-Element mit Attributen

      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.

       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!