dynamic-component-loader | dynamically load components in Angular v9 | Reactive Programming library

Arrgh, Having problems with Dynamically built components using ReactiveForms.

Need to trigger and Mat-Dialog and load set of components in it - works fine. Need to build some of the components dynamically from a mapping array - works fine. Need to build nested reactive forms using CVA (control value assessor) - this is the problem.

I have a working nested form using CVA that updates the form data correctly ... Unless I build the components dynamically. If I use dynamic components they are ignored in the form updates. Not sure how to fix this. My app will be very complex network of forms, so need to figure this out!

I have used the Angular.io guide for dynamic components.

Angular.io - resolve dynamic components

and followed this guide for CVA implementation

In-Depth - using CVA's

Does anyone have any Ideas?? Had issues with Stackblitz so pushed code to gitHub

dev-dynamic-comp issue

I'm implementing a relatively complex component loader in Angular, and I'd like to dynamically get the component instance from a rxjs store.

Given a directive used for Dynamic Component Loading with ViewContainerRef injected:

I studied the code available on angular.io, and I replicated it in my scenario with a mat-tab-group. However, I would like to be able to use the ad-host directive inside a *ngFor. I tried it, and the directive is always undefined.

I searched here and, while there are several questions addressing this problem, I found no clear example on how to do this. The idea is that I have a mat-tab-group composed of several mat-tabs, which are loaded through a *ngFor directive. In each tab I would like to show a different component according to the selected index. Is there any way to achieve this?

Here is my modified stackblitz: as you can see it literally says this.adHost is undefined in the console.

The current official docs only shows how to dynamically change components within an tag. https://angular.io/guide/dynamic-component-loader

What I want to achieve is, let's say I have 3 components: header, section, and footer with the following selectors:

Can someone help me, how to use ng-template inside innerHTML tag,

Stackblitz Demo: https://stackblitz.com/edit/angular-xgnnj4

What I wanted to do is,

In the Component HTML

I'm trying to build a list of cards which may contain different components; So for example I have the following array of objects:

I'm creating a generic Gantt visualization component.

The part where I will display the weeks and tasks is generic, but every row will have a header that I want to be dynamic, so for example, when displaying a list of tasks per user I want to put some user data and some action buttons, but when displaying tasks by project I want to display project data and project action buttons.

I implemented a solution following this: https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

Everything seems to work fine, I see the actions buttons load differently in each scenario, but not the user or project data. Also, console.log(this.data.name) on the button click, I correctly see the data in the console, but if I try to print in on the template {{ data.name }} I see nothing.

I see the following error in console:

Error: Expression has changed after it was checked. Previous value: 'CD_INIT_VALUE'. Current value: 'test project - Task 3 '. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook?

I double checked all steps, and I'm doing the exact same thing you can see on that tutorial.

Does anyone know if that tutorial is out dated?

thank you in advance for your help!

EDIT: If I change the ngAfterViewInit to ngOnInit it all works... but according to the tutorial I should be using the first. Can anyone explain to me this? :-)

I am developing an Ionic + Angular 5 project.

I need to dynamically load some components. Following the Dynamic Component Loader Example in the Angular documentation I am able to successfully load components and displayed them.

I have a need, however, to be able to loop through the loaded components.

I can easily maintain my own list of components in the parent as I create and destroy the child components but it seems to me that that's ugly and not the "Angular Way".

After much experimentation and research it seems that I cannot use @ViewChildren to access dynamically added components since they have their own views. ViewChildren not finding Dynamically components

Is this correct?

I am able to use viewContainerRef.get() to iterate over the child views and retrieve ViewRefs. But there doesn't seem to be a way to get a reference to the component given a ViewRef?

I notice the 'rootNodes' property of the ViewRef however that property is not documented in the Angular docs View Ref However, it is documented in the EmbeddedViewRef docs Embedded View Ref but that still doesn't seem to give me access to the component.

So the question is when I have a parent that dynamically adds child components how can I from the parent loop through the child components (so I can call one of my methods in the child)? My suspicion is that I am missing something stupid simple, have some fundamental misconception, or that there is a different pattern that I should be using.

I've modified the Dynamic Component Loader example to highlight what I am trying to do.Modified Dynamic Component Loader