Variable does not receive Subscribe() - Angular 7 data

Question

I’m having a problem in my code. I’m using angular 7, in it I’m having difficulties on a screen I import a file.

I want to run a "spinner" that will be shown when I click on "send", it runs Spinner, however, when it stops executing the function that is in my alert was to wipe the data on input and set in the variable "loading" (variable that shows the spinner) the boolean value "false", but this does not happen.

In the log it shows that the variable "loading" receives the "false" inside the subscribe(), but on the screen it still remains true until I pass the mouse cursor over the menu next to it.

import { HttpClient, HttpEventType } from '@angular/common/http';
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import {ApiTenantService} from '../../../../core/_base/crud/utils/apitenant.service';
import { Observable } from 'rxjs';



@Component({
  selector: 'kt-coeficientes',
  templateUrl: './coeficientes.component.html',
  styleUrls: ['./coeficientes.component.scss']
})



export class CoeficientesComponent implements OnInit {
  
  form: FormGroup;
  loading: boolean = false;
  public baseUrl = 'coefficients';

  @ViewChild('fileInput') fileInput: ElementRef;

  constructor(private fb: FormBuilder, private api: ApiTenantService) {
      this.createForm();
  }

  ngOnInit() {

  }

  createForm() {
      this.form = this.fb.group({
          coefficientFile: ['', Validators.required],
      });
  }

  
  onFileChange(event) {
      console.log('onFileChange', event);
      if (event.target.files.length > 0) {
          let file = event.target.files[0];
          this.form.get('coefficientFile').setValue(file);
          console.log('onFileChange dentro do if', event);
      }
      console.log('onFileChange depois do if', event);
  }

  private prepareSave(): any {
      let input = new FormData();
      input.append('coefficientFile', this.form.get('coefficientFile').value);
      return input;
  }

  onSubmit() {
      const formModel = this.prepareSave();
      this.loading = true;
      console.log('loading fora 1', this.loading);
    
      this.sendFile(formModel).subscribe(res => {

          console.log('onSubmit', res);
          
          this.loading = false;
          this.clearFile();
          alert('done!');
          console.log('loading subscribe', this.loading);

      
    });

      console.log('loading fora', this.loading);
  }

  clearFile() {
      this.form.get('coefficientFile').setValue(null);
      this.fileInput.nativeElement.value = '';
      this.loading = false;
     
      
  }

  sendFile(fileToUpload: File): Observable<boolean> {
      return this.api.post(this.baseUrl + '/file', fileToUpload);
  }
  

}

{{(loading)}}
<div class="kt-portlet">
    <div class="kt-portlet__head">
        <div class="kt-portlet__head-caption">
            <div class="kt-portlet__head-title">
                <span class="kt-portlet__head-icon kt-hide">
                    <i class="la la-gear"></i>
                </span>
                <h3 class="kt-portlet__head-text "><i class="fas fa-file-upload"></i>Coeficientes</h3>
            </div>
        </div>
    </div>
    <div class="kt-portlet__body">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="form-group">
                        <input type="file" id="coefficientFile" (change)="onFileChange($event)" #fileInput>
                        <div *ngIf="loading">
                            <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
                          </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <button mat-raised-button type="submit" color="primary" (click)="onSubmit()" [disabled]="form.invalid || loading">Enviar</button>&nbsp;
                <button mat-raised-button type="submit" (click)="clearFile()">Limpar</button>
            </div>
      
        </div>
    </div>

</div>