CODEWITHSUNDEEP
angulartypescriptasync-await
Nesan Mano
Nesan Mano

Reputation: 2166

Asynchroneous call in angular

have a notification animation where I show a popup-like window that is closed (reverse animation) when clicked on the close button. If there is another notification, it waits for 1.5s and plays the animation.

I m using async/Await with a promise. The thing does not seem to work. It keeps executing instantly therefore, I don't the animation playing.

Here is my code in typescript

async waitAsync() {
        return new Promise<boolean>((resolve, reject)=> {delay(1500); resolve(true);});

    }

// called on close button click
toggleNotif() {
        this.hide = true;
        this.animateWithdraw = true;
        this.toggleAnimation();
        this.currentIdx++;
        this.checkForNextAlert();

    }

// checks for new notification and plays the animation consequently.
    checkForNextAlert() {
        if (this.currentIdx < this.maxProjToAlert) {

            console.log(this.projectsToAlert[this.currentIdx].name);
            this.setAlertMsg(this.projectsToAlert[this.currentIdx].name);

            (async()=> {
                const val = await this.waitAsync();
                this.animateWithdraw = false;
                this.toggleAnimation();
            })();


            // tslint:disable-next-line:no-console
            // this.animateWithdraw = await NotificationComponent.waitFunction();
            // tslint:disable-next-line:no-console

        }
    }

// Affects some CSS class so the css3 animation gets played.
    toggleAnimation():string {
        if(!this.animateWithdraw) {
           return 'notif notifAnimate';
        }
        return 'notif notifWithdraw';
    }

Upvotes: 0

Views: 42

Answers (1)

Petr Averyanov
Petr Averyanov

Reputation: 9476

Is it rxjs delay? You should try:

return of({}).pipe(delay(1500)).toPromise();

P.S. why not simple:

setTimeout(() => {
    this.animateWithdraw = false;
    this.toggleAnimation();
}, 1500)

Upvotes: 2

Related Questions