Prevent duplicate toast display in Angular Toast component

27 Sep 20235 minutes to read

You can prevent identical same toast displaying in a screen by event function. You can terminate the toast displaying process by setting cancel event property in beforeOpen Event.

Here below sample demonstrates preventing duplicate title Toast element displaying, with custom code blocks.

app.component.ts

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
      <div id="toast_target"></div>
      <button ejs-button [isPrimary]="true" (click)="btnClick($event)">Show Toast</button>
      <ejs-toast #element (created)="onCreate($event)" (beforeOpen)="onBeforeOpen($event)" (close)='onClose($event)' [position]='position' > </ejs-toast>
      `
})

export class AppComponent {
  @ViewChild('element') public element?: any;
  public position = { X: 'Center' };
  public prevDuplicates: boolean = false;
  public toastFlag: number = 0;

  public toasts = [
    { title: 'Warning !', content: 'There was a problem with your network connection.', isOpen: false },
    { title: 'Success !', content: 'Your message has been sent successfully.', isOpen: false },
    { title: 'Error !', content: 'A problem has been occurred while submitting your data.', isOpen: false }
  ];

  onBeforeOpen(e: any) {
    if(this.preventDuplicate(e)){
      e.cancel =true;
    };
  }

  preventDuplicate(e: any) {
    for (let i: number = 0; i < this.toasts.length; i++) {
      if (this.toasts[i].title === e.options.title && !this.toasts[i].isOpen) {
        this.toasts[i].isOpen = true;
        return false;
      }
    }
    return true;
  }

  onClose(e: any) {
    for (let i: number = 0; i < this.toasts.length; i++) {
      if (this.toasts[i].title === e.options.title) {
        this.toasts[i].isOpen = false;
      }
    }
  }

  onCreate(args: any) {
    this.element.show(this.toasts[this.toastFlag]);
    ++this.toastFlag;
  }

  btnClick(args: any) {
    this.toastShow();
  }

  toastShow() {
    setTimeout(
      () => {
        this.element.show(this.toasts[this.toastFlag]);
        ++this.toastFlag;
        if (this.toastFlag === (this.toasts.length)) {
          this.toastFlag = 0;
        }
      }, 0);
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ToastModule } from '@syncfusion/ej2-angular-notifications';
import { ButtonModule, CheckBoxModule , RadioButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ToastModule, ButtonModule, CheckBoxModule , RadioButtonModule, DropDownListModule, DatePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);