Here is complete rewrite of the question because it seems it was poorly written.
I am trying to use this package:
https://www.npmjs.com/package/ng-dynamic-component
for dynamic component @Input() with ngFor loop variable.
The package's author has answered a question that seems to address my exact case. However I don't get it to work like proposed in the answer:
<div *ngFor="let tabComponent of tabComponents()">
<ndc-dynamic
[ndcDynamicComponent]="tabComponent.component"
[ndcDynamicInputs]="{ tabItem: tabComponent }"
</ndc-dynamic>
</div>
TabContainerComponent's tabComponents -array is like this:
public tabComponents: ITabComponent[] = [
{ name: 'SelectedObjects', icon: 'selected-objects', isSelected: true, component: SelectedObjectsComponent },
{ name: 'DummyComponent1', icon: 'pin', isSelected: false, component: DummyComponent },
{ name: 'DummyComponent2', icon: 'selected-objects', isSelected: false, component: Dummy2Component }
]
and all the dynamic tab component have:
@Input() tabItem: any;
According to documentation I should add ndcDynamicInputs:inputs like below (and not inline in html:
<div *ngFor="let tabComponent of tabComponents()">
<ndc-dynamic
[ndcDynamicComponent]="tabComponent.component"
[ndcDynamicInputs]="inputs"
</ndc-dynamic>
</div>
The problem is how to define the inputs-array in the ts class:
inputs = {
// how to assign tabComponent?
tabItem: ??
}
So how to assign the value of the How to assign value of *ngFor loop variable to angular dynamic component's @Input property?
Instead of [ndcDynamicInputs]="inputs", have you tried [ndcDynamicInputs]="{ tabItem: tabComponent }" ?