Property Binding

Mit dem Property Binding können Eigenschaften eines HTML-Tags mit Variablen aus dem TypeScript-Teil einer Komponente verknüpft werden. In manchen Situationen lässt sich dasselbe auch mit String Interpolation erreichen, doch Property Binding ist meist die elegantere und technisch korrektere Lösung.
Der Unterschied liegt darin, dass Property Binding direkt auf die Eigenschaften des DOM-Elements zugreift, während String Interpolation nur den Textinhalt des Attributs ersetzt. Besonders bei dynamischen Werten wie src, href, disabled, value oder checked ist Property Binding daher zuverlässiger und performanter.
Das folgende Beispiel zeigt, wie die URL eines Bildes über eine Variable gesetzt wird. Zuerst mit Property Binding, anschließend mit String Interpolation.

import { Component } from '@angular/core';

@Component({
  selector: 'app-property-binding',
  template: `
    <!-- Variant 1: Property Binding -->
    <img [src]="imageUrl" [alt]="imageDescription" width="300">
    <p>Current Picture (Property Binding): {{ imageDescription }}</p>

    <!-- Variant 2: String Interpolation -->
    <img src="{{ imageUrl }}" alt="{{ imageDescription }}" width="300">
    <p>Current Picture (String Interpolation): {{ imageDescription }}</p>
  `,
  standalone: true,
  styles: [`
    img {
      display: block;
      width: 200px;
      height: 200px;
    }
  `]
})

export class PropertyBindingComponent {
  imageUrl = 'https://angular.io/assets/images/logos/angular/angular.png';
  imageDescription = 'Angular Logo';
}