`@HostBinding`

Binds a host element property, attribute, or class to a class member.

Since Angular 2+ Spec ↗

Syntax

@HostBinding(hostProperty) propertyName: T

Parameters

Name	Type	Required	Description
`hostProperty`	`string`	No	Host binding target, e.g. 'class.active' or 'attr.role'.

Returns

PropertyDecorator — Decorator binding the member to the host.

Examples

import { Directive, HostBinding } from '@angular/core';

@Directive({ selector: '[appActive]', standalone: true })
export class ActiveDirective {
  @HostBinding('class.active') isActive = true;
  @HostBinding('attr.role') role = 'button';
}

Notes

Use `class.<name>` to toggle a CSS class, `style.<prop>` for inline styles, and `attr.<name>` for attributes. Bindings update automatically with change detection. The `host` metadata object is a modern alternative for static or signal-driven bindings.