Deklarative Host-Metadatenbindung mit Signal-Inputs

Snippet

Deklarative Host-Metadatenbindung mit Signal-Inputs

Moderne Angular-Komponenten bevorzugen die 'host'-Eigenschaft im Dekorator gegenüber @HostBinding-Dekoratoren. In Kombination mit Signal-Inputs entsteht eine rein deklarative Brücke zwischen dem reaktiven Zustand der Komponente und den DOM-Eigenschaften/Attributen des Host-Elements, was die Lesbarkeit verbessert und Boilerplate reduziert.

snippet.js
javascript
@Component({
  selector: 'app-button',
  host: {
    '[class.is-loading]': 'loading()',
    '[attr.aria-disabled]': 'disabled()',
    '(click)': 'handleClick()'
  }
})
export class AppButton {
  loading = input(false);
  disabled = input(false);
}

angular

Erklärung

host: { '[class.is-loading]': 'loading()' }

Bindet eine CSS-Klasse am Host-Element direkt an den Wert eines Signals.

loading = input(false);

Deklariert einen Signal-Input, der es ermöglicht, dass externe Werte die internen Host-Bindings steuern.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Verwandt

Aus deiner Bibliothek