Declarative Host Metadata Binding using Signal Inputs

Snippet

Declarative Host Metadata Binding using Signal Inputs

Modern Angular components favor the 'host' property in the decorator over @HostBinding decorators. When paired with Signal Inputs, this creates a purely declarative bridge between the component's reactive state and the DOM properties/attributes of the host element, improving readability and reducing boilerplate while staying within the signal reactivity model.

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

Breakdown

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

Binds a CSS class on the host element directly to the value of a signal.

loading = input(false);

Declares a signal input which allows external values to drive the component's internal host bindings.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Declarative Host Metadata Binding using Signal Inputs

Related