Dynamic component in expandable row of table

Question

I wanted to add custom component which will be added dynamically to template. In the first row it works but in the following it event does not appear in DOM. Do you know why and how to fix it - example?

Answer 1

This part:

@ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer;

fetches the first item with the given id. Hence it works only for the first row. You could try going with the @ViewChildren decorator instead. This would require you to probably write a custom directive, which would be used as a selector in that @ViewChildren decorator (as it would be impractical to work with multiple dynamic IDs here).

Then again, if you'll be going the directive route, perhaps it's better to pass the required data as an @Input (and @Output if needed) to the directive and make the directive itself responsible for adding component to the template?