title: Loading spinner with *ngIf not showing during execution of function
body: <p>If trying to show a loading spinner while a function is being executed. I already tried different things, but the spinner won't show.</p>
  
  <h2>This is the HTML:</h2>
  
  <pre><code>&lt;div class="row pt-3" id="firstRow"&gt;
   &lt;div class="col"&gt;
    &lt;button class="btn btn-dark back-button"&gt;
     &lt;fa name="upload"&gt;&lt;/fa&gt;
     &lt;span&gt;Load .csv file&lt;/span&gt;
    &lt;/button&gt;
    &lt;input type="file" #fileImportInput name="File Upload" class="txtFileUpload p-3" (change)="fileChangeListener($event)" accept=".csv" /&gt;
      &lt;img class="spinner" *ngIf="loading" src="../../../assets/img/gif-spinner/Spin-2s-200px.gif" /&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>This is part of the TS-code</h2>
  
  <pre><code>export class MotionAnalysisComponent implements OnInit {
  loading = false;
  
   fileChangeListener($event: any): void {
     this.loading = true;
  
     let files = $event.srcElement.files;
  
     if (this.isCSVFile(files[0])) {
      let input = $event.target;
      let reader = new FileReader();
      reader.readAsText(input.files[0]);
  
      reader.onload = () =&gt; {
       let csvData = reader.result;
       let csvRecordsArray = (&lt;string&gt;csvData).split(/\r\n|\n/);
       this.csvRecords = this.getDataRecordsArrayFromCSVFile(csvRecordsArray, 4);
     };
  
     reader.onerror = function () {
      alert('Unable to read ' + input.files[0]);
     };
    } else {
      alert("Please import valid .csv file.");
      this.fileReset();
    }
  
     this.loading = false;
  </code></pre>
  
  <p>If I comment the "this.loading = false" out within the function, then the spinner will show AFTER the function is executed and will (obviously) not disappear. So how can I make the HTML understand, that the spinner should be shown during the execution of the function?</p>