Cannot pass events

[sanyashvets]

I have 2 dynamic components with events.
First dymamic component have few events:
Output('action1') action1= new EventEmitter<any>();
Output('action2') action2= new EventEmitter<any>();
Output('action3') action3= new EventEmitter<any>();

Also i have host component for this dynamic components. All components registered in declarations/entry components

HTML of host:
<ng-container *ngxComponentOutlet="component; context: {data: data}">

events in host, like in first dynamic component:
Output('action1') action1= new EventEmitter<any>();
Output('action2') action2= new EventEmitter<any>();
Output('action3') action3= new EventEmitter<any>();

and events doesnt fires on in host wrapper component:

<journal-host [component]="getDisplayedComponent()"
                [data]="data"
                (action1)="onAction1($event)"
                (action3)="onAction2($event)"
                (action3)="onAction3($event)"></journal-host>

Why I cant reach those onAction1/2/3() functions in my wrapper? IDE autocomplete tells me that I have this events, but they doesnt fire. Help please

UPD:
seems like it works when event name isn't specified (Output('action2') action2 = ... => Output() action2 = ....)

[thekiba]

What version are you using? Can you repeat the problem on stackblitz.com?

Also, you do not need to use HostComponent for your dynamics. This feature is marked as deprecated due to its complexity of use. Instead, use *ngxComponentOutlet on ng-container as a structural directive. The directive will make a bindings on your component automatically.

[ciukstar]

Same issue: "event not caught when emitted by x instance":

<div *ngFor="let x of layouts">
      <ng-container *ngxComponentOutlet="x"
                    (stateChange)="onTemplateChange($event)">
      </ng-container>
</div>

[thekiba]

@ciukstar you can't do it that way. You need to create an @Output() with EventEmitter and with the same name in host component. All events will be handled by this output.

[thekiba]

As example on stackblitz https://stackblitz.com/edit/angular-ngxd-example-with-output-binding?file=src%2Fapp%2Fhello.component.ts

[ciukstar]

Thank you! Now I got it. There must be at least three @Components involved !?

[balaji-balamurugan]

how can we emit event from parent to child components

[thekiba]

@balajibadly, you can use the output of the directive (ngxComponentOutletActivate) to get the component instance and then send any event to the component

[balaji-balamurugan]

can i have any stackBlitz example @thekiba ?

[balaji-balamurugan]

can i have any stackBlitz example @thekiba ?

hello @thekiba ?

[balaji-balamurugan]

no rply ?

[thekiba]

You have to use (ngxComponentOutletActivate) in the template:

<ng-container 
  [ngxComponentOutlet]="component"
  (ngxComponentOutletActivate)="onActivate($event)">
</ng-container>

And then you'll get a component instance in onActivate callback

  onActivate(component: LazyComponent): void {
    component.something();
  }

[balaji-balamurugan]

how to trigger this onActivateEvent in a click function!
I need to handle a click function from parent component to projected component , so that the component can do something i want