Angular get output event on custom html tag

Question

I need to capture output event in my parent class on custom event tag created in typescript file. I can't use html directly because I am getting the child from another microapp.

         var node: HTMLElement = document.createElement('custom-html-tag');
         node.id = 'custom-html-tag';
         node.setAttribute('custom-data', JSON.stringify(this.Data));

         this.renderer.appendChild(this.componentRef.nativeElement, node);

        //getOutput is the event emitted from child
                    var el = document.getElementById("custom-html-tag"); 

        el.addEventListener('getOutput', ((event: CustomEvent) => {
          console.log('called from child class');
        }) as EventListener);

addEventListener is not working. I also tried Hostlistner but it's also not working.

 @HostListener('getOutput', ['$event']) onClick(event) {
   console.log('component is clicked');
   console.log(event);
}

I was reading that we could also use renderer to capture the event, but it doesn't capture the event either.

      renderer.listen('document', 'getOutput', (event) => {
    console.log('called from child class');
    // Do something with 'event'
  });

I verified in the "Event Listener" section that "getOutput" event is available. But it comes only when I select the custom html tag. I don't see the event in the root OR document.

How can I capture the event in my parent class?