0

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?

char m
  • 7,840
  • 14
  • 68
  • 117
  • Possible duplicate of https://stackoverflow.com/questions/42056828/pass-an-input-value-into-a-ngcomponentoutlet-created-component – Sergey Aug 29 '19 at 08:08
  • @Sergey: not duplicate. there's tons of questions about Inputs and Outputs in general related to ngComponentOutlet. this is specific to ng-dynamic-component. – char m Aug 29 '19 at 08:12
  • This would would be a tab navigation that would not handle back button in a browser. Is this what you want? ex: you come from page A into page B with the tabcomponent. You press around in your tabcomponent a couple of times then hit browser back button and you go back to page A – Jens Alenius Aug 29 '19 at 08:21
  • this has nothing to do with navigation or back buttons or browser tabs. – char m Aug 29 '19 at 08:27
  • as stated in question i want to know how to pass ngFor-loop variable to ng-dynamic-component's @Input() – char m Aug 29 '19 at 08:28
  • @charm as far as I see your problem is around passing inputs in `ngComponentOutlet` (it doesn't matter whether you are trying to pass them to your local component or a library's component) the flow is the same. Therefore, you need to consider how to pass `Inputs` and `Outputs` to `ngComponentOutlet` and thus you will pass them to your library's component. Also there is no trace of using `ng-dynamic-component` – Sergey Aug 29 '19 at 08:38
  • @Sergey: yes there is: ndcDynamicInputs:inputs; ndcDynamicOutputs:outputs. I just use the other format. Maybe I have to rewrite this without ngComponentOutlet to emphasize even more that i am using ng-dynamic-component-package like stated in 2nd row. – char m Aug 29 '19 at 08:56

1 Answers1

1

Instead of [ndcDynamicInputs]="inputs", have you tried [ndcDynamicInputs]="{ tabItem: tabComponent }" ?

smithnblack
  • 505
  • 7
  • 17
  • yes, it actually works just like i wrote in the question. i naturally tried this, but i just checked value in debugging at init time and it doesn't show correct value for some reason. – char m Aug 29 '19 at 09:50