Toast services in Angular Toast

26 Sep 20267 minutes to read

The Angular Toast component provides a built-in utility function to render the Angular Toast with minimal code. The utility function will render the Angular Toast without the need of rendering the container element in the DOM where the Angular Toast is appended. So that, the Angular Toast can now be rendered on the go. The following are the option to render the Angular Toast using the utility function.

Show Angular Toast with predefined types

The Angular Toast component support 4 types of predefined Angular Toast with Essential® colors for various situations which can be shown using the ToastUtility.show by just defining the type of the Angular Toast without defining any class names. The following options are used as an argument on calling the utility function for predefined types:

Options Description
content Specifies the content that can be displayed on the Angular Toast.
type Specifies the type of the predefined Angular Toasts. The 4 types of predefined Angular Toasts are Information, Success, Error, Warning
timeOut Specifies the Angular Toast display time duration on the page in milliseconds. Once the time expires, Angular Toast message will be removed. Setting 0 as a time out value displays the Angular Toast on the page until the user closes it manually. 
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';
import { ToastComponent } from '@syncfusion/ej2-angular-notifications';
import { closest} from '@syncfusion/ej2-base';
import { ToastUtility } from '@syncfusion/ej2-notifications';

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


standalone: true,
    selector: 'app-root',
    template: `<div>
    <button ejs-button  cssClass='e-btn e-control e-info' (click)="infoToast($event)">Info Message</button>
    <button ejs-button  cssClass='e-btn e-control e-success' (click)="successToast($event)">Success Message</button>
    <button ejs-button  cssClass='e-btn e-control e-warning' (click)="warningToast($event)">Warning Message</button>
    <button ejs-button  cssClass='e-btn e-control e-danger' (click)="dangerToast($event)">Danger Message</button>
    </div>
    <br/>
    <div style="text-align: center;">
    <button ejs-button  cssClass='e-btn e-control' (click)="hideToast($event)">Hide All</button>
    </div>`
})

export class AppComponent {
    public toastObj?: ToastComponent;
    public infoToast(args: any): void {
        this.toastObj = ToastUtility.show('Please read the comments carefully', 'Information', 20000) as ToastComponent;
    }
    public successToast(args: any): void {
        this.toastObj = ToastUtility.show('Your message has been sent successfully', 'Success', 20000) as ToastComponent;
    }
    public warningToast(args: any): void {
        this.toastObj = ToastUtility.show('There was a problem with your network connection', 'Warning', 20000) as ToastComponent;
    }
    public dangerToast(args: any): void {
        this.toastObj = ToastUtility.show('A problem has been occurred while submitting the data', 'Error', 20000) as ToastComponent;
    }
    public hideToast(args: any): void {
        this.toastObj?.hide('All');
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Show Angular Toast with ToastModel

The utility function can be called using the ToastModel as argument to show the toast where all the properties in the ToastModel like any events, position, close icon, action buttons, etc. can be used in the ToastUtility.show.

import { ToastModule } from '@syncfusion/ej2-angular-notifications';
import {
  ButtonModule,
} from '@syncfusion/ej2-angular-buttons';

import { Component } from '@angular/core';
import { ToastUtility } from '@syncfusion/ej2-notifications';

@Component({
  imports: [
    ToastModule,
    ButtonModule,
  ],

  standalone: true,
  selector: 'app-root',
  template: `<div style="text-align: center;margin-top: 150px">
    <button ejs-button  cssClass='e-btn e-control' (click)="showToast($event)">Show Toast</button>
    </div>`,
})
export class AppComponent {
  public showToast(args: any): void {
    var toastObj = ToastUtility.show({
      title: 'Toast Title',
      content: 'Toast shown using utility function with ToastModel',
      timeOut: 0,
      position: { X: 'Right', Y: 'Bottom' },
      showCloseButton: true,
      click: this.toastClick.bind(this),
      buttons: [
        {
          model: { content: 'Close' },
          click: () => this.toastClose(toastObj),
        },
      ],
    });
  }

  public toastClose(e: any): void {
    e.hide(e.toastEle);
  }

  public toastClick(): void {
    console.log('Toast click event is triggered');
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));