How to provide Inputs and Output for dynamic components

Question

I ran into ng-dynamic-component package, while struggling with Angular's ngComponentOutlet unacheiveable @Inputs and @Outputs interactions.

In my application, I'd like to dynamically instantiate different types of tab components in *ngFor.

Reading ng-dynamic-component documentation, interacting with @Inputs and @Outputs isn't being dont in the HTML template, instead, in the component implementation itself.

Considering the fact I need to run over all of my tabs, each tab needs to get different @Input and subscribe with different data to @Outputs based on its' instance, e.g,

<ndc-dynamic *ngFor="let tab of tabs"
              [ndcDynamicComponent]="component"
              [ndcDynamicInputs]="inputs" <!-- this needs to be different for each tab-->
              [ndcDynamicOutputs]="outputs"> <!-- this needs to be different for each tab-->
</ndc-dynamic>

Except for corrupting my tab object with inputs and outputs member, or creating a special interface such as :

interface DynamicTab {
  tab: Tab,
  inputs: any,
  outputs: any
}

Any idea how to implement such behavior? some way to make good use of the *ngFor and manipulate the basic inputs with the current tab?

I could create two methods on my component to calculate the needed inputs and outputs, but all fo these options seem to be too much work to manipulate the current tab data i already have while running with the *ngFor

Thanks in advance for any insights!

Answer 1

I have the next:

<mat-tab-group>
  <mat-tab *ngFor="let tab of tabs" label="{{tab.label}}">
    <ng-container *ngComponentOutlet="tab.component;injector:createInjector(tab.data)"></ng-container>
  </mat-tab>
</mat-tab-group>

The tabs is a array object with my differents component, each component is put in each tab.

it is my model about tab:

export interface CwcTabModel {
  label?: string;
  component?: any;
  data?: CwcDataTab;
}


export class CwcDataTab {
  data?: any;
}

CwcDataTab is the data to send to each component and with the injector is when pass data.

And now you can create a Test component, for instance:

TestTabOneComponent:

@Component({
  selector: 'app-test-tab-one',
  templateUrl: './test-tab-one.component.html',
  styleUrls: ['./test-tab-one.component.scss']
})
export class TestTabOneComponent implements OnInit {

  information: string;

  constructor(private dataTab: CwcDataTab) {
   if (this.dataTab !== undefined && this.dataTab.data !== undefined) {
     this.information = this.dataTab.data;
   }
  }

}

Then for use the component tabs you can create in some component the object tabs:

tabs = [
  {
    label: 'TAB1',
    component: TestTabOneComponent, /* it will be a dynamic component, but data should be different*/
    data: {
      data: 'value1 valor distinto, mismo componente'
    }
  },
  {
    label: 'TAB2',
    component: TestTabOneComponent, /* it will be a dynamic component, but data should be different*/
    data: {
      data: 'value2 valor distinto, mismo componente'
    }
  },
{
    label: 'TAB3',
    component: TestTabOneComponent, /* it will be a dynamic component, but data should be different*/
    data: {
      data: 'value3 valor distinto, mismo componente'
    }
  }
];

And each tabs use the same component (can be generic component) and in each component you can see the different data. sorry my english, I hope you can use that.