Edge case where close button does not work

meriem-matouk commented 1 month ago

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I have this simple repro code, just run it and show the 2 toasts, then attempt to close them, the first will close while the second toast won't close.

import { ChangeDetectionStrategy, Component, TemplateRef } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { HotToastService, provideHotToastConfig } from '@ngxpert/hot-toast';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
  <button (click)="showToast()">
    Show Toast with Material Symbol Icon
  </button>
  `,
})
export class App {
  name = 'Angular';
  constructor(private toast: HotToastService) {}

  showToast() {
    this.toast.error('eroor.....');
  }
}

bootstrapApplication(App, {
  providers: [
    provideHotToastConfig({
      position: 'top-right',
      stacking: 'vertical',
      visibleToasts: 5,
      autoClose: true,
      dismissible: true,
      style: {
        padding: '16px',
      },
    }), // @ngxpert/hot-toast providers
    provideAnimationsAsync(),
  ],
});

Expected behavior

The toast should close when i click on the close button

Minimal reproduction of the problem with instructions

Here is a stackblitz repro for the issue: https://stackblitz.com/edit/stackblitz-starters-41c25s?file=src%2Fmain.ts

What is the motivation / use case for changing the behavior?

improve user experience

Environment

/


Angular version: 18.0.0


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: 20  
- Platform:  Windows 

Others: