Angular 8 and order of displaying the components

Question

I have two components that are displayed side by side within home component like so:

<app-productList></app-productList>
<app-productGallery></app-productGallery>

If I comment out the second line ( <app-productgallery></app-productGallery> ), the app-productList is displayed instantly, but if I don't (I need both), the gallery gets displayed first and only after all the images in the gallery are loaded/seen, the app-productList gets displayed (meanwhile, the product list is empty). I either want that:

• both components get displayed at the same time OR
• productList gets displayed first

I probably could create a promise or an rxjs subject and tell the app that I want to see the gallery only after product list is displayed and not sooner, but my question is more general - why is this even happening, what principle of execution is this following?

Answer 1

It seems that you have both component in your app.component.html file like this:

<app-product-gallary></app-product-gallary>
<app-product-list><app-product-list>

Angular Render component exactly based on their order that appears in the .html file. So, simply change their order in your template file by something like this:

<app-product-list><app-product-list>
<app-product-gallary></app-product-gallary>

However if you provide some code we can help you better here as there isn't code here and it's just my guess.