Search code examples
angularangular-componentsangular2-directives

Using directive output in Drective Composition API

The Angular Docs show that you can use Directive Composition API even when directive has outputs. However, it seems that directive's outputs become component's outputs. I'd like to use directive's output within the component to which I'm attaching the directive. Is there any way to do that?

@Component({
  standalone: true,
  selector: 'admin-menu',
  template: 'admin-menu.html',
  hostDirectives: [{
    directive: MenuBehavior,
    inputs: ['menuId'],
    outputs: ['menuClosed'],
  }],
})
export class AdminMenu {

  someMethod() {
    // use menuClosed here....
  }
}
Solution

  • You can use hostListener decorator to listen hostDirectives output.

    export class AdminMenu {
  @HostListener('menuClosed',['$event']) onMenuClosed(e:{closed:boolean}){
    console.log('Closed',e);
  }
}

    Example