CODEWITHSUNDEEP
javascripttypescriptangular5
nas
nas

Reputation: 2417

How to return value from function called inside class

I am trying to display a loader when the user clicks on the Export button. I have created a separate class which does this export functionality.

This is the code I have tried.

My problem is that the loader is set to true but I am not sure how to set it to false after export is done.

HTML

<app-loader [showLoader]="showLoader"></app-loader>

ts

import { csvExport } from '../../classes/csvExport';

export class DashboardSpaComponent implements OnInit {
    public csvExport: csvExport = new csvExport();

    // LOADER FLAG
    public showLoader: boolean = false;

    downloadPDF() {
        this.showLoader = true;
        //call class
        this.csvExport.download();

    }
}

csvExport.ts

export class CsvExport {
    download() {
        // code here to do export 
    }
}

Upvotes: 0

Views: 66

Answers (1)

ZaidRehman
ZaidRehman

Reputation: 1751

You need to return a Promise like this.

export class CsvExport {
    download() {
        return new Promise((resolve, reject) => {
           // code here to do export
           // on completion call this. resolve()
        }) 
    }
}

And use download function like this

this.csvExport.download().then(()=>{
    this.showLoader = false;
})

.then is called when the promise is resolved (The resolve function is called) You can understand more from here

Upvotes: 1

Related Questions