Overview
The Toast is a UI component that displays pop-up notifications.
When you need to display a notification, call the notify(message, type, displayTime) method with values for the message, type, and displayTime properties passed as arguments.
You can specify one of the four predefined types of notifications, depending on the mood of the message:
-
'info'
A blue toast with a message bubble icon. -
'warning'
A yellow toast with an exclamation mark icon. -
'error'
A red toast with an X icon. -
'success'
A green toast with a check mark icon.
In this demo, toggle check boxes to see the 'success' and 'error' notification types.
You can also customize the Toast appearance. Set the type property to 'custom' and use a contentTemplate. Refer to the following topic for more information: Customize the Content.
If you need to specify other Toast properties in addition to type and displayTime, call the notify(options, type, displayTime) method and pass an object as the argument. In this object, you can set any Toast property, such as shading, position, width, height, and others.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<div id="product-list">
<h1>Product List</h1>
<ul>
<li *ngFor="let product of products">
<img [alt]="product.Name" [src]="product.ImageSrc" />
<div>{{ product.Name }}</div>
<dx-check-box
text="Available"
(onValueChanged)="checkAvailable($event, product)"
>
</dx-check-box>
</li>
</ul>
<dx-toast [(visible)]="isVisible" [type]="type" [message]="message">
</dx-toast>
</div>
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxCheckBoxModule, DxToastModule } from 'devextreme-angular';
import { Product, Service } from './app.service';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
providers: [Service],
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
})
export class AppComponent {
products: Product[];
isVisible = false;
type = 'info';
message = '';
constructor(service: Service) {
this.products = service.getProducts();
}
checkAvailable(e, product) {
const type = e.value ? 'success' : 'error';
const text = product.Name + (e.value ? ' is available' : ' is not available');
this.type = type;
this.message = text;
this.isVisible = true;
}
}
@NgModule({
imports: [
BrowserModule,
BrowserTransferStateModule,
DxCheckBoxModule,
DxToastModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #product-list {
padding: 10px;
}
::ng-deep #product-list ul {
text-align: center;
list-style-type: none;
margin: 20px 0;
}
::ng-deep #product-list ul li {
display: inline-block;
width: 160px;
margin: 10px;
}
::ng-deep #product-list ul li img {
width: 100px;
}
::ng-deep .dx-toast-content {
min-width: 300px;
max-width: 400px;
}
import { Injectable } from '@angular/core';
export class Product {
ID: number;
Name: string;
Price: number;
Current_Inventory: number;
Backorder: number;
Manufacturing: number;
Category: string;
ImageSrc: string;
}
const products: Product[] = [{
ID: 4,
Name: 'SuperLED 50',
Price: 1600,
Current_Inventory: 77,
Backorder: 0,
Manufacturing: 55,
Category: 'Televisions',
ImageSrc: '../../../../images/products/4.png',
}, {
ID: 5,
Name: 'SuperLED 42',
Price: 1450,
Current_Inventory: 445,
Backorder: 0,
Manufacturing: 0,
Category: 'Televisions',
ImageSrc: '../../../../images/products/5.png',
}, {
ID: 6,
Name: 'SuperLCD 55',
Price: 1350,
Current_Inventory: 345,
Backorder: 0,
Manufacturing: 5,
Category: 'Televisions',
ImageSrc: '../../../../images/products/6.png',
}, {
ID: 7,
Name: 'SuperLCD 42',
Price: 1200,
Current_Inventory: 210,
Backorder: 0,
Manufacturing: 20,
Category: 'Televisions',
ImageSrc: '../../../../images/products/7.png',
}];
@Injectable()
export class Service {
getProducts() : Product[] {
return products;
}
}
// In real applications, you should not transpile code in the browser.
// You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
'typescript': {
'exports': 'ts',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'@angular/core': 'npm:@angular/core@12.2.17',
'@angular/platform-browser': 'npm:@angular/platform-browser@12.2.17',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.17',
'@angular/forms': 'npm:@angular/forms@12.2.17',
'@angular/common': 'npm:@angular/common@12.2.17',
'@angular/compiler': 'npm:@angular/compiler@12.2.17',
'tslib': 'npm:tslib@2.3.1/tslib.js',
'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js',
'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.1.5/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme@23.1.5/bundles/dx.all.js',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.1',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.48',
'devextreme-angular': 'npm:devextreme-angular@23.1.5',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
'rxjs': {
defaultExtension: 'js',
},
'rxjs/operators': {
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
'npm:@angular/*/package.json',
'npm:@angular/common@12.2.17/*/package.json',
'npm:rxjs@7.5.3/package.json',
'npm:rxjs@7.5.3/operators/package.json',
'npm:devextreme-angular@23.1.5/*/package.json',
'npm:devextreme-angular@23.1.5/ui/*/package.json',
'npm:devextreme-angular@23.1.5/package.json',
'npm:devexpress-diagram@2.2.1/package.json',
'npm:devexpress-gantt@4.1.48/package.json',
],
};
System.config(window.config);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.12.0/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import("app").catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>