0

Angular 16.1.0 (Standalone architecture)

I've created a standalone directive to be applied to all inputs:

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

@Directive({
  standalone: true,
  selector: 'input',
})
export class RedInput {
  constructor(private elementRef: ElementRef<HTMLInputElement>) {
    elementRef.nativeElement.style.backgroundColor = 'red';
  }
}

And it only works if I explicitly import it to some component, and it only works for the input elements directly in that component's template (e.g.: it does not work for any "input" elements inside child components)

I've tried importing it to the root component, but as I've mentioned previously, it does not work for anything else than the "input" elements that are directly in the component's template

I'm looking for a way to make this kind of directives to work "globally", so that I would be able to apply some logic to all inputs (or any other valid non-specific selector) in all components, without the need to explicitly apply some attribute selector to each element.

My investigation shown that directives with selectors like this worked fine previously when people used to add those to the root module's "declarations" array, but with standalone approach there is no root module and no declarations.

XVR-dev
  • 1
  • 1

0 Answers0