The great angular dynamic (components) edit page
![Image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNjYopZk1Cwe0BEIP8o92Enla4TPAJEPXdCefGSdWtmQ6g-yeXzBmLIsALUXelhwhYY0qrLVMtvSVAhP5k7qENcqafIlxT80_wa8dXeBiltKLLl8aRZCkVrf2z8AansyYrVyvCm6CUv4xy/s1600/logs.png)
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