Unterschied zwischen HTML Attribute und DOM Property (Folge 5)

 in Folgen des Podcasts

Der Unterschied zwischen HTML Attribute und DOM Property ist das Thema dieser Happy Angular Podcast Folge. Dabei lernen wie wir gezielt die HTML Attribute bzw. DOM Property setzen.

HTML Attribute

Für die Initialisierung der DOM-Property wird die HTML Attribute genutzt. Es folgt in der Regel keine Anpassung zu Laufzeit und stellt den initialen Wert der DOM Property dar. Zum Setzen des HTML Attributes wird der Präfix attr verwendet.

<table>
  <tr>
    <td [attr.colspan]="2">
      A1
    </td>
    <td attr.colspan="{{3}}">
      A2
    </td>
  </tr>
  <tr>
    <td>B1</td>
    <td>B2</td>
    <td>B3</td>
    <td>B4</td>
    <td>B5</td>
  </tr>
</table>

DOM Property

Dagegen ist die DOM Property die Laufzeit-Variable und diese kann zur Laufzeit angepasst werden.

<input [value]="'Max Mustermann'"/>

Beziehung zwischen HTML Attribute und DOM Property

In vielen Fällen gibt es ein HTML Attribute zu jedem DOM Property. Jedoch gibt es Ausnahmen, wie beispielsweise colspan (HTML Attribute ohne DOM Property) und textContent (DOM Property ohne HTML Attribute).

Empfohlene Beiträge