mediumFrontend

What do @HostListener and @HostBinding do?

Q: What do @HostListener and @HostBinding do?

**Core concept.** They let a directive or component interact with its **host element** without a template. @HostListener('event') binds a method to an event on the host (or window / document ). @HostBinding('prop') binds a class property to a host property, attribute, class, or style. host element @HostListener: react to events <rect class='d-box' x='250' y='100' width='18

691 views

Understand the problem

Explain host decorators.

hostlistenerhostbinding

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A directive using both

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

@Directive({ selector: '[appToggleActive]', standalone: true })
export class ToggleActiveDirective {
  @HostBinding('class.active') active = false;        // reflects onto the host
  @HostBinding('attr.aria-pressed') get pressed() { return this.active; }

  @HostListener('click') onClick() {                  // reacts to host click
    this.active = !this.active;
  }
}

// usage:  <button appToggleActive>Toggle</button>

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Explain the difference between Shadow DOM, Emulated, and None View Encapsulation with compile output.

How do you optimize initial bundle size using Route Preloading with custom strategies?