[Fixed] Show overlay when a method is called and then hide it when its over

Issue

Ive got a method on angular which filter some values in a table.

Since there are a lot of records sometimes it can take a lot of seconds to complete so ive added an overlay with a loading icon.

Ive tried to put a boolean inside my method (lets call it filter() ) that is set to true when called and at the end is changed back to false.

My problem is that the value change only at the end of filter() so the overlay is always hidden even during the method filtering.

This is some code just to make you understand:

 filter(): any {
    this.filtri.push({idReport:this.idReport,status:this.status,activity:this.activity,azione:this.azione,ndg:this.ndg,dossierNumber:this.dossierNumber,dtReportFrom:this.dtReportFrom, dtReportTo:this.dtReportTo,dtActivityFrom:this.dtActivityFrom,dtActivityTo:this.dtActivityTo,nominativo:this.nominativo,causale:this.causale})
    this.filtering=true;

    if (this.activities == null) {
      this.filtering=false;
      return null;
    }

    if (this.filtri == null) {
      this.filtering=false;
      return null;
    }
    this.retValue = this.activities;

    this.retValue = _idReport
      ? this.retValue.filter(
          activity => activity.report.id.toString().indexOf(_idReport) != -1
        )
      : this.retValue;
      this.retValue = _status
      ? this.retValue.filter(
          activity => activity.report.status.cod.indexOf(_status) != -1
        )
      : this.retValue;
      this.retValue = _activity
      ? this.retValue.filter(
          activity =>
            activity.task && activity.task.cod.indexOf(_activity) != -1
        )
      : this.retValue;

.....THEN MORE STUFF LIKE THIS....

 this.filtering=false;
    return this.retValue;
  }

this.filtering is the boolean used on:

<div class="overlay" [hidden]="filtering===false">


<div class="overlay transparent" [hidden]="filtering===false">

  <div class="hourglass"><i class="material-icons">hourglass_empty</i></div>
</div></div>

I hope everything is clear, thank you for the help!

EDIT:

Code after Kamil Kiełczewski help:

filterAsync():any {
    this.filtering=true;
    setTimeout(this.filter());
 }
  filter(): any {
    this.filtri.push({idReport:this.idReport,status:this.status,activity:this.activity,azione:this.azione,ndg:this.ndg,dossierNumber:this.dossierNumber,dtReportFrom:this.dtReportFrom, dtReportTo:this.dtReportTo,dtActivityFrom:this.dtActivityFrom,dtActivityTo:this.dtActivityTo,nominativo:this.nominativo,causale:this.causale})

    if (this.activities == null) {
      // this.filtering=false;
      return null;
    }

    if (this.filtri == null) {
      // this.filtering=false;
      return null;
    }
    const _idReport = this.idReport;
    const _status = this.status;
    const _activity = this.activity;
    const _action = this.azione;
    const _ndg = this.ndg;
    const _dossierNumber = this.dossierNumber;
    const _dtReportFrom = this.dtReportFrom;
    const _dtReportTo = this.dtReportTo;
    const _dtActivityFrom = this.dtActivityFrom;
    const _dtActivityTo = this.dtActivityTo;
    const _nominativo = this.nominativo;
    const _reason = this.causale;

    this.retValue = this.activities;

    this.retValue = _idReport
      ? this.retValue.filter(
          activity => activity.report.id.toString().indexOf(_idReport) != -1
        )
      : this.retValue;
      this.retValue = _status
      ? this.retValue.filter(
          activity => activity.report.status.cod.indexOf(_status) != -1
        )
      : this.retValue;
      this.retValue = _activity
      ? this.retValue.filter(
          activity =>
            activity.task && activity.task.cod.indexOf(_activity) != -1
        )
      : this.retValue;
      this.retValue = _action
      ? this.retValue.filter(
          activity =>
            activity.task && activity.task.cod.toUpperCase().indexOf(_action) != -1
        )
      : this.retValue;
      this.retValue = _ndg
      ? this.retValue.filter(
          activity =>
            activity.report.customer.ndg.toString().indexOf(_ndg) != -1
        )
      : this.retValue;
      this.retValue = _dossierNumber
      ? this.retValue.filter(
          activity =>
            activity.report.dossier.dossierNumber.indexOf(_dossierNumber) != -1
        )
      : this.retValue;

      this.retValue = _dtReportFrom
      ? this.retValue.filter(
          activity =>
            !activity.report.date ||
            this.stringToDate(activity.report.date, this.ISO_FORMAT, '-') >=
              new Date(_dtReportFrom).getTime()
        )
      : this.retValue;
      this.retValue = _dtReportTo
      ? this.retValue.filter(
          activity =>
            !activity.report.date ||
            this.stringToDate(activity.report.date, this.ISO_FORMAT, '-') <=
              new Date(_dtReportTo).getTime()
        )
      : this.retValue;
      this.retValue = _dtActivityFrom
      ? this.retValue.filter(
          activity =>
            this.stringToDate(activity.dtInsert, this.ISO_FORMAT, '-') >=
            new Date(_dtActivityFrom).getTime()
        )
      : this.retValue;
      this.retValue = _dtActivityTo
      ? this.retValue.filter(
          activity =>
            this.stringToDate(activity.dtInsert, this.ISO_FORMAT, '-') <=
            new Date(_dtActivityTo).getTime()
        )
      : this.retValue;     
      this.retValue = _nominativo 
        ? this.retValue.filter(
          activity =>{
            if(activity.report.customer.hasOwnProperty("businessName")){
              return activity.report.customer.businessName.toUpperCase().indexOf(_nominativo.toLowerCase()) != -1;
            } else {
              return false;
            }
          }         
        )
      : this.retValue;
      this.retValue = _reason
      ? this.retValue.filter(
          activity =>
          activity.report.reason.toUpperCase().indexOf(_reason) != -1
        )
      : this.retValue;
      this.filtering=false;
    return this.retValue;

  }

Solution

You can inject the ChangeDetectorRef class into your component and then calling detectChanges() on it.

    constructor(
        private ref: ChangeDetectorRef
    ) {
    }

   filter() {
     this.filtering=true;
     this.ref.detectChanges();

      //Do some filtering
      this.filtering=false;
   }