How to make angular standalone directive globally available?

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,
...
],
})

Continue reading...