Timeout in Angular Toast component
4 Apr 20237 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 { Component, ViewChild } from '@angular/core';
@Component({
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') element;
public position = { X: 'Right', Y: 'Bottom' };
onCreate() {
this.element.show();
}
btnClick() {
const value = parseInt((document.getElementById('toast_input_index') as HTMLInputElement).value, 10);
this.element.show({timeOut: value});
}
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
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 { Component, ViewChild } from '@angular/core';
@Component({
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') element;
public position = { X: 'Right', Y: 'Top' };
onCreate() {
this.element.show();
}
btnClick() {
this.element.show();
}
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);