How close the blocks in angular SSR web-site?

Question

When at first time I open my angular Server Side Render web-site i see that all my hidden blocks is opened. And that happens only for first load.

And yes, i use mdbootsrap collapse for toggle blocks.

Answer 1

The problem was at my nav menu. Menu was created on MDBootstrap. After a long time search i found the problem in my tags, the buttons prevented me for closing windows. I just was change them to and all work up.

Answer 2

My way of fixing this is to put a variable that tells when the page finish rendering.

1: create a variable:

public isLoading: boolean; // load the variable in the ngInit

Or

public isLoading = false; // already loaded variable

2: on each hidden block add the condition (*ngIf) to display:

<div class="hidden" *ngIf="isLoading === true">content</div>

3: add the ngAfterInit event that will set the variable to true

ngAfterViewInit() {
  this.isLoading = true;
}

AfterInit info https://angular.io/api/core/AfterViewInit