How to make angular standalone directive globally available?

Question

I have a few simple helper directives which I want to use throughout the entire app. With modules this was easy to do, but with standalone I don't know how we can do it.

One example of such a simple helper directive is:

@Directive({
 selector: '[click]',
 standalone: true,
 host: {
 class: 'on-click',
 tabindex: '0',
 },
})
export class ClickEventDirective {}

Every single component in the app that uses a (click)="clickHandler()" somewhere should have this applied. I was thinking of something like this, but it should trickle down to all child components.

@Component({
 selector: 'app',
 template: `
 <router-outlet />
 `,
 standalone: true,
 imports: [
 ClickEventDirective,
 ...
 ],
})

• Naren Murali: only providers can be provided globally not components or directives, so it is not possible