Why sometimes toasterService does not show popup?

Question

public constructor(
    private toasterService: ToasterService) {
}

Then I listen toaster:

public ngOnInit() {
this.errorWatcher.localConfigObservable.subscribe(exception => {
      const toast: any = {
        type: exception.type,
        body: Helper.toasterBodyMessages(exception.messages)
      };

      this.toasterService.pop(toast);
    });
}

I send message using:

public invokeMessageOutside(type: string, title: string, message: any) {
    this.exception.type = type;
    this.exception.title = title;

    if (isArray(message)) {
      this.exception.messages = message;
    } else {
      this.exception.messages.push(message);
    }

    this.call();
  }

  private call(): void {
    this.localConfigObservable.next(this.exception);
  }

So, I can not get why sometimes this popup is showed, sometimes no.

If to do console.log() inside:

this.errorWatcher.localConfigObservable.subscribe(exception => {
    console.log('Done');
});

It always works.

My config is:

 public configToaster: ToasterConfig = new ToasterConfig({
    positionClass: "toast-top-right",
    showCloseButton: true,
    preventDuplicates: true,
    timeout: 5000,
    tapToDismiss: false,
    bodyOutputType: BodyOutputType.TrustedHtml,
    mouseoverTimerStop: false
  });

Maybe problem is in: preventDuplicates: true?

Answer 1

Maybe problem is in: preventDuplicates: true?

Yes.

I created a simple project:

export class AppComponent implements OnInit, OnDestroy {
  isAlive = true;
  public config: ToasterConfig = new ToasterConfig({
    positionClass: "toast-top-right",
    showCloseButton: true,
    preventDuplicates: true,
    timeout: 5000,
    tapToDismiss: false,
    bodyOutputType: BodyOutputType.TrustedHtml,
    mouseoverTimerStop: false
  });

  constructor(
      private service: ToasterService,
      private dataService: DataService,
  ) { }

  public sendMessage(): void { 
      this.dataService.setMessage('success', 'Title text', 'Other text');
  }

  ngOnInit(): void { 
    this.dataService.msgEvent.pipe(
        takeWhile(() => this.isAlive)
    ).subscribe(data => {
        this.showToastMessage(data);
    });
  }

  private showToastMessage(data): void { 
    const toast: any = {
        type: data.type,
        body: data.message
      };

      this.service.pop(toast);
  }

  ngOnDestroy(): void { 
      this.isAlive = false;
  }

}

With a service (useless in this case):

export class DataService {
    private $msg = new Subject<any>();
    public msgEvent = this.$msg.asObservable();

    public setMessage(type: string, title: string, message: any): void {
        this.$msg.next({
            type: type,
            title: title, 
            message: message
        });
    }
}

And after the first click, I didn't see any other messages. That's because the configuration says: preventDuplicates: true

If you change it to false it will work like a charm.

In case you need this project, you can fork it from here (I don't know why but stackblitz isn't working for any angular project right now): https://stackblitz.com/edit/angular-aiadys

Just remember to do an npm install.

Answer 2

It could be due to Angular lifecycle digest. You should try to add some code on your watcher.

this.errorWatcher.localConfigObservable.pipe(
  observeOn(asyncScheduler)
).subscribe(exception => {
  const toast: any = {
    type: exception.type,
    body: Helper.toasterBodyMessages(exception.messages)
  };
  this.toasterService.pop(toast);
});