How to show multiple toasts in positions in Angular Toast

14 Aug 20264 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.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 { Component, ViewChild } from '@angular/core';

@Component({
imports: [
         ToastModule, ButtonModule, CheckBoxModule , RadioButtonModule, DropDownListModule, DatePickerModule
    ],


standalone: true,
    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();
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));