Asynchroneous call in angular

Question

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'; }

Petr Averyanov · Accepted Answer · 2021-01-19 00:36:36Z

2

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)

answered Jan 19, 2021 at 0:36

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nesan Mano Over a year ago

Thanks, it is working beautifully. I don't understand why the rxjs delay works so differently. Will keep the setTimeout simple way on the side. It is looking good. Very similar to Handler threads on Android.

Collectives™ on Stack Overflow

Asynchroneous call in angular

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related