CODEWITHSUNDEEP
javascriptangulartypescriptzonengx-toastr
Marian07
Marian07

Reputation: 2582

Angular ngx-toastr Progress Bar Causes Infinite Loop

I'm using ngx-toastr in my Angular 18 project to display success messages with a progress bar. However, enabling the progress bar causes a re-rendering loop, preventing event execution. Here's my setup:

ToastrModule.forRoot({
  timeOut: 5000,
  positionClass: 'toast-top-right',
  preventDuplicates: false,
  progressBar: true,
  closeButton: true,
  onActivateTick: false
});

I also tried to run outside Zone.js with this

this._ngZone.runOutsideAngular(() => {
  this.toastr.success('Toastr fun!');
});

The issue only occurs with the progress bar enabled. I've tried running the toast setting onActivateTick to false, but the problem persists.

It is probably relating to the animation of the progress bar. When a toast is active, the other events don't work because of the loop caused on the template. However having more toaster notification with progress bar works in their example https://ngx-toastr.vercel.app/ enter image description here

I also tried the import without Angular Animations but the same issue appeared. The progress bar animation probably uses an interval.

import { ToastrModule, ToastNoAnimation, ToastNoAnimationModule } from 'ngx-toastr';

@NgModule({
  imports: [
    // ...

    // BrowserAnimationsModule no longer required
    ToastNoAnimationModule.forRoot(),
  ],
  // ...
})
class AppModule {}

Upvotes: 0

Views: 289

Answers (0)

Related Questions