I am able to import the directive through the constructor, since its binded to the element!

Just to make sure I created two directives and its working fine!

binded component html

<p>test works!</p> <br /><br /><br /> test directive output {{ output }} <br /><br /><br /><br /> <br /> qwerty directive output {{ output1 }}<br /><br /><br /><br /> 

binded component ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { QwertyDirective } from '../qwerty.directive'; import { TestDirective } from '../test.directive'; @Component({ selector: 'app-test', standalone: true, hostDirectives: [ { directive: TestDirective, inputs: ['menuId'], outputs: ['emitter'], }, { directive: QwertyDirective, inputs: ['menuId'], outputs: ['emitter'], }, ], templateUrl: './test.component.html', styleUrls: ['./test.component.css'], }) export class TestComponent implements OnInit { @Input('menuId') menuId!: string; @Output() emitter: EventEmitter<any> = new EventEmitter<any>(); output = ''; output1 = ''; constructor( private testDir: TestDirective, private qwertyDir: QwertyDirective ) {} ngOnInit() { this.testDir.emitter.subscribe((val: any) => { this.output = val; }); this.qwertyDir.emitter.subscribe((val: any) => { this.output1 = val; }); } } 

directive

import { Directive, EventEmitter, Input, Output } from '@angular/core'; import { interval } from 'rxjs'; @Directive({ selector: '[appTest]', standalone: true, }) export class TestDirective { @Input('menuId') menuId!: string; @Output() emitter: EventEmitter<any> = new EventEmitter<any>(); constructor() { interval(1000).subscribe(() => { this.emitter.emit(Math.random() + ' ' + this.menuId); }); } } 

main.ts

import { Component } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; import { QwertyDirective } from './qwerty.directive'; import { TestDirective } from './test.directive'; import { TestComponent } from './test/test.component'; @Component({ selector: 'app-root', standalone: true, imports: [TestDirective, TestComponent, QwertyDirective], template: ` <app-test [menuId]="name" (emitter)="emitter($event)"></app-test> output {{output}} `, }) export class App { name = 'Angular'; output = ''; output1 = ''; emitter(event: any) { this.output = event; } } bootstrapApplication(App); 

stackblitz