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