I’m having trouble getting my Angular directive to work on input fields that are located in child and grandchild components. While the directive functions correctly for input fields that are directly within the component to which I’ve applied it, it does not seem to propagate down to nested input fields.

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

@Directive({
  selector: 'input',
  standalone: true,
})
export class BlurDirective {
  @HostListener('blur', ['$event'])
  blur($event: Event): void {
    console.log('blur');
  }
}

Here is my directive as stated before it triggers when I add an input field directly and leave the field, but does not work for all the input fields in the child and grandchild components