DropdownContext

[ng-alynasser]

I'm implementing a dropdown context menu in a sperate component & passing its PolymorpheusComponent as follows:

readonly zoneContextMenuComponent = new PolymorpheusComponent(
    ZoneContextMenuComponent
  );
  
<div tuiDropdownContext [tuiDropdown]="zoneContextMenuComponent"></div

How can I pass inputs & listen for outputs from that component?

[waterplea]

There's no way to dynamically pass inputs and outputs to polymorpheus components. You can use context to pass data in, if you want to listen to some outputs — you can pass RxJS Subjects in context and use them to output some data. Or you can have your component in a template and for it not to be dynamic.

Dynamic:

<div tuiDropdownContext [tuiDropdown]="content"></div>
<ng-template #content>
  <ng-container
    *polymorpheusOutlet="zoneContextMenuComponent; context: { input: value, output: subject }"
  ></ng-container>
</ng-template>

Non-dynamic:

<div tuiDropdownContext [tuiDropdown]="content"></div>
<ng-template #content>
  <zone-context [input]="value" (output)="onOutput($event)" />
</ng-template>