Sign in
Skip to solution
mediumFrontend

What do @HostListener and @HostBinding do?

691 views
01

Understand the problem

Explain host decorators.

hostlistenerhostbinding
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

@HostListener subscribes to an event on the host element (e.g. @HostListener('click')); @HostBinding binds a host element's property/attribute/class/style to a component field. They're common in attribute directives to react to and style the host.

Solution ready — 2 min read

Classified // press E to declassify

04

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>
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 40 of 121 decoded in the Angular track. One more won't hurt.

Back to track