ts
import { Directive, ElementRef, Renderer2 } from '@angular/core';
@Directive({
selector: '[appFocusRing]',
standalone: true,
host: {
'(focusin)': 'setActive(true)',
'(focusout)': 'setActive(false)',
},
})
export class FocusRingDirective {
constructor(
private readonly element: ElementRef<HTMLElement>,
private readonly renderer: Renderer2,
) {}
setActive(active: boolean): void {
const host = this.element.nativeElement;
if (active) {
this.renderer.addClass(host, 'focus-ring');
} else {
this.renderer.removeClass(host, 'focus-ring');
}
}
}
ts
@Component({
standalone: true,
imports: [FocusRingDirective],
template: `<button appFocusRing type="button">Continue</button>`,
})
export class FormActionsComponent {}
This keeps the directive reusable and makes its dependencies explicit. Put host event wiring in the decorator's host object, and use ElementRef with Renderer2 for DOM behavior; there is no NgModule declaration and no need for @HostBinding or @HostListener.