Show multiple toasts in various positions in Angular Toast component

27 Sep 20234 minutes to read

In default Toast position only updates once visible toasts get destroyed. If You needs to display multiple toasts with different position means needs to initiate another toast for achieving this.

Here below sample demonstrates to add multiple toasts adding in the different position.

app.component.ts

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

@Component({
    selector: 'app-root',
    template: `
        <div id="toast_target"></div>
        <div style="display:inline-block">
          <div style="margin-right:10px;display:inline-block">
           <button ejs-button (click)="btnRightClick($event)">Show Left Position Toast</button>
          </div>
          <div style="display:inline-block">
           <button ejs-button (click)="btnClick($event)" >Show Right Position Toast</button>
          </div>
        </div>
        <ejs-toast #element (created)="onCreate($event)" [position] = 'position' >
              <ng-template #title>
                  <div>Warning !</div>
              </ng-template>
              <ng-template #content>
                  <div>There was a problem with your network connection.</div>
              </ng-template>
       </ejs-toast>
        <ejs-toast #rightToast (created)="onCreate1($event)" [position] = 'position1' >
              <ng-template #title>
                  <div>Success !</div>
              </ng-template>
              <ng-template #content>
                  <div>Your message has been sent successfully.</div>
              </ng-template>
         </ejs-toast>
        `
})

export class AppComponent {
    @ViewChild('element') public element: any;
    @ViewChild('rightToast') rightToast: any;
    public position = { X: 'Left', Y: 'Bottom' };
    public position1 = { X: 'Right', Y: 'Bottom' };


   onCreate1(args: any) {
     this.rightToast.show();
   }

    onCreate(args: any) {
      this.element.show();
    }
    btnRightClick(args: any) {
      this.element.show();
    }
    btnClick(args: any) {
      this.rightToast.show();
    }
}

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);