Showing posts from July, 2019

The great angular dynamic (components) edit page

This one is a long story...

My comps goes like this, I GET from API a list of config rows, each of those has a list of config fields, each of those dynamically renders to an appropriate component, 2 of them are inherited 1 from another.

The flow is:
1. CTOR and ngOnInit, subscribce to 2 observables, 2 http requests for data.
2. Both subscribces call a ready fn that triggers the *ngIf
3. Then there is an *ngFor for the rows and another *ngFor for the fields
4. Down there I have my #container's for placement of a dynamic component
5. In some cases, since the dynamic component is inherited, its calling ngOnInit twice (its parent's ngOnInit)

Lets see how can we overcome each of these problems...
For implementation, see in my specially crafted git.

Problem 1:  the containers prop (my QueryList) is undefined

@ViewChildren ('container', { read:ViewContainerRef }) containers: QueryList<ViewContainerRef>;
In Part 1 of my app, open the console and see for yourself, whe…