Show different types of toast in Angular Toast component
20 Sep 20224 minutes to read
The Essential JS 2 Toast has the following predefined styles that can be defined using the cssClass
property for achieving different types of toast.
Class | Description |
---|---|
e-success | Used to represent a positive Toast. |
e-info | Used to represent an informative Toast. |
e-warning | Used to represent a Toast with caution. |
e-danger | Used to represent a negative Toast. |
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div id="toast_target"></div>
<button ejs-button [isPrimary]="true" (click)="btnClick($event)">Show Toast</button>
<ejs-toast #element (created)="onCreate($event)" [position] = 'position' > </ejs-toast>
`
})
export class AppComponent {
@ViewChild('element') element;
public position = { X: 'Right', Y: 'Bottom' };
public toasts = [
{ title: 'Warning !', content: 'There was a problem with your network connection.', cssClass: 'e-toast-warning' },
{ title: 'Success !', content: 'Your message has been sent successfully.', cssClass: 'e-toast-success'},
{ title: 'Error !', content: 'A problem has been occurred while submitting your data.', cssClass: 'e-toast-danger' },
{ title: 'Information !', content: 'Please read the comments carefully.', cssClass: 'e-toast-info' } ];
public toastFlag: number = 0;
onCreate() {
this.element.show(this.toasts[this.toastFlag]);
++this.toastFlag;
}
btnClick() {
this.toastShow();
}
toastShow() {
setTimeout(
() => {
this.element.show(this.toasts[this.toastFlag]);
++this.toastFlag;
if (this.toastFlag === (this.toasts.length)) {
this.toastFlag = 0;
}
}, 0);
}
}
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);