[Fixed] Pages loading on top one another when data not fetched in ngOnInit()

Issue

I am getting unusual behaviour when routing to a page from a side menu placed app.componment.
When the page loads data is called from a remote server in ngOnInit()

 ngOnInit() {
    // Fecth data using service, retuns only oe row so departmentTransfion mut be type any and not array[]
    this.searching= true;
    this.service.getDepartment('Transfusion').subscribe(data => {
      this.departmentTransfusion = data;
      this.searching = false;
    })
  }

The data is referenced in my page.html:

  <ion-row  style="padding-left: 4px;">
    <ion-col>
      <h3>General Infomration <ion-icon name="information-circle-outline"></ion-icon></h3>
      
      <p class="preference-value">
        {{departmentHaematology.general}}
      </p>
      <h4 class="preference-name">Opening hours <ion-icon name="hourglass-outline"></ion-icon> </h4>
      <p class="preference-value">
        
       {{departmentHaematology.openingHours}}
      </p>
    </ion-col>

When an error is thrown in the web console, the pages appear to overlap one another when routed from the side menu:

TypeError: undefined is not an object (evaluating
‘ctx.departmentHaeamtology.general’

Pages overlapping in the web browser:

So my question is, could the overlapping view be due to data not been loaded in ngOnIt() before the view is rendered ? My understanding is that the view will not render before ngOnInit() executes and thus this method is ideal for downloading data from a remote server.

Qoute form the angular docs on life cycle:

An ngOnInit() is a good place for a component to fetch its initial
data.

So could this unusual overlapping rendering be due to data not been captured before the view renders? And if so, then what part of the life cycle should we be using to capture data from a remote server before the view renders?

SOLUTION:

Use an angular ngIf else to display a ion-spinner until data is loaded.
This solved the unusual rendering of pages.

<!--Seraching spinner-->
        <div *ngIf="searching; else elseBlock">
          <ion-spinner class="spinner-container" name="bubbles" color="dark"></ion-spinner>
        </div>

        <ng-template #elseBlock>

Solution

Your problem is completely normal. The problem is that a HTTP request is asynchronous, and it can take.. for exemple 0.2s to complete (depends on server, connection, etc).

Independently of making the request in the constructor or ngOnInit, the view will display before the request to the server is completed. Later, the request will complete, then you set the variable value and the view is refreshed.

Your problem is that the first time the view renders, the request to the server hasn’t been completed yet, so departmentHaeamtology is null (empty). Your HTML is trying to access the property "general" of a null variable, and that’s why the error happens.

The solution for that problem is adding *ngIf="departmentHaeamtology" to the page container. Then, the view won’t show until the variable has a value. The problem then is that you will get a blank page until the request completes. It could be fast, but you’ll see a "popping" effect anyway. A solution is adding a loading circle with CSS.

About your pages acting weird, it might be due to the error. ionic makes weird stuff when there are errors in the HTML file. Try my solution and check.