Timeout in Angular Toast component

27 Apr 20246 minutes to read

Toast can be expired based on timeOut property, toast will live till the timeOut reaches without user interaction, a timeOut value was considered as the millisecond.

  • timeOut delay can be visually represented through Progress Bar.

  • extendedTimeOut property can make how long the toast will display after a user hovers over it.

You can terminate the process by using showCloseButton property for destroying toast at any time.

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 id='sample_container'>
         <div id='container'>
            <div class="e-float-input">
               <input class="e-input" id="toast_input_index" required="" value="5000">
               <span class="e-float-line"></span>
               <label class="e-float-text">Enter timeOut</label>
            </div>
        </div>
        <button ejs-button [isPrimary]="true" (click)="btnClick($event)">Show Toast</button>
        </div>
        <ejs-toast #element (created)="onCreate($event)" [position] = 'position' >
              <ng-template #title>
                  <div>Matt sent you a friend request</div>
              </ng-template>
              <ng-template #content>
                  <div>Hey, wanna dress up as wizards and ride our hoverboards?</div>
              </ng-template>
        </ejs-toast>
        `
})

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

    onCreate(args: any) {
      this.element.show();
    }
    btnClick(args: any) {
      const value = parseInt((document.getElementById('toast_input_index') as HTMLInputElement).value, 10);
      this.element.show({timeOut: value});
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Static toast

We can prevent auto hiding in a toast as visible like static. For this, we need to set zero (0) value in timeOut Property.

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 id='sample_container'>
        <button ejs-button [isPrimary]="true" (click)="btnClick($event)">Show Toast</button>
        </div>
        <ejs-toast #element (created)="onCreate($event)" showCloseButton=true timeOut = 0  [position] = 'position' >
                  <ng-template #title>
                  <div>Matt sent you a friend request</div>
              </ng-template>
              <ng-template #content>
                  <div>Hey, wanna dress up as wizards and ride our hoverboards?</div>
              </ng-template>
     </ejs-toast>`
})

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

  onCreate(args: any) {
    this.element.show();
  }
  btnClick(args: any) {
    this.element.show();
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also