Dynamic Inputs and Outputs

[patrickcorrigan]

I'm using context to be able to have different inputs to my dynamic components. Is there a way to do the same for outputs? I don't know what my outputs will be ahead of time. This is fine for inputs but I can't figure it out for outputs

        <ng-container
           *ngxComponentOutlet="col.component; context: col.inputs"
         >
         </ng-container>

I'm building a table component that can take either values or components as data. Wondering how to bind outputs

`[
        { type: 'data', value: pipeline.name },
        { type: 'data', value: pipeline.time_last_modified },
        { type: 'data', value: 'Source' },
        { type: 'data', value: 'Dest' },
        { type: 'data', value: 'Schema Update' },
        { type: 'data', value: 'Schedule' },
        { type: 'data', value: 'Status' },
        {
          type: 'component',
          component: LockComponent,
          inputs: { owner: pipeline.lock_owner },
        },
        {
          type: 'component',
          component: PipelineLibraryActionsButtonsComponent,
          inputs: { pipeline },
          outputs: {run}
        },
      ])`

[thekiba]

Hello, @patrickcorrigan!

If you want to use outputs binding you have to create that outputs in the component where you are using *ngxComponentOutlet. You can't create outputs dynamically.

The best case of usage witch it's creating a base component with inputs and outputs, and then it is inherited by dynamic components and adaptee component.

You can found an example here https://stackblitz.com/edit/angular-simple-dynamic?file=src%2Fapp%2Fapp.module.ts

And if you want to make dynamic components more flexible you have to create a Resolver that will resolve your dynamic components via ResolvePipe.

I really hope that the best case what you have to do 🦸‍♂️ And I'll make more examples soon

[patrickcorrigan]

Thanks @thekiba, I thought that. I was creating a table component and wanted to be able to use any component as a table cell.

        { type: 'data', value: pipeline.name },
        { type: 'data', value: pipeline.time_last_modified },
        { type: 'data', value: 'Source' },
        { type: 'data', value: 'Dest' },
        { type: 'data', value: 'Schema Update' },
        { type: 'data', value: 'Schedule' },
        { type: 'data', value: 'Status' },
        {
          type: 'component',
          component: LockComponent,
          inputs: { owner: pipeline.lock_owner },
        },
        {
          type: 'component',
          component: PipelineLibraryActionsButtonsComponent,
          inputs: { pipeline },
          outputs: {run}
        },
      ])

It was cool and it worked but I think it would actually be too restrictive maybe and like you said I would have to create wrapper components for any that I wanted to use.

I ended up going with a content projection based approach instead. It turned out to be much simpler to implement and more flexible. That's probably why most other table components work that way. It was definitely a cool experiment and I really enjoyed using the library :)