Angular Toast - Getting Started
jQuery
Angular
Vue
React
Toast is a UI component that displays pop-up notifications.
This tutorial shows how to add the Toast component to your application and configure its core features.
Each section in this tutorial describes a single configuration step. You can also find the full code in the following GitHub repository: getting-started-with-toast.
Display a Toast notification
Use the 'notify' Method
Call the notify method to display a Toast. This method can accept four different sets of arguments.
The basic syntax is notify(message, type, displayTime). You should specify the message, type, and displayTime.
To specify additional Toast properties, call the notify(options, type, displayTime) method and pass an object as the first argument. The example below uses this syntax.
To stack Toasts, call the notify(message, stack) or notify(options, stack) method (depending on the complexity of the notification content). The first method accepts only the message as the first argument, while the second method accepts a Toast configuration object. The second argument in both methods specifies stacking settings.
For more information about stacking Toasts, refer to the following online demo: Toast Stack Demo.
You can specify one of the four predefined types of notifications, depending on 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.
If you call the method that allows additional options, you can set the width, height position, and other options. The configuration of the position property in the example below reads as follows: "place my bottom side at the bottom side of the "#container".
jQuery
$(function() { const types = ['error', 'info', 'success', 'warning']; $("#show-message").dxButton({ text: "Show message", onClick: function() { DevExpress.ui.notify( { message: "You have a new message", width: 230, position: { my: "bottom", at: "bottom", of: "#container" } }, types[Math.floor(Math.random() * 4)], 500 ); }, }); });
<html> <head> <!-- ... --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/minor_23_2/css/dx.light.css"> <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/minor_23_2/js/dx.all.js"></script> <script type="text/javascript" src="index.js"></script> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <div id="container"> <div id="buttons"> <div id="show-message"></div> </div> </div> </body> </html>
#container { width: 300px; height: 120px; margin: 5px; } #buttons { display: flex; }
Angular
<div id="container"> <div id="buttons"> <dx-button text="Show message" (onClick)="showMessage()" > </dx-button> </div> </div>
import { Component } from '@angular/core'; import notify from 'devextreme/ui/notify'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { types = ['error', 'info', 'success', 'warning']; showMessage() { notify( { message: "You have a new message", width: 230, position: { at: "bottom", my: "bottom", of: "#container" } }, this.types[Math.floor(Math.random() * 4)], 500 ); } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxButtonModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxButtonModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
#container { width: 300px; height: 120px; margin: 5px; } #buttons { display: flex; }
Vue
<template> <div id="container"> <div id="buttons"> <dxButton text="Show message" @click="showMessage" > </dxButton> </div> </div> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxButton } from 'devextreme-vue/button'; import notify from "devextreme/ui/notify"; export default { components: { DxButton } data() { return { types: ['error', 'info', 'success', 'warning'] }; }, methods: { showMessage() { notify( { message: "You have a new message", width: 230, position: { at: "bottom", my: "bottom", of: "#container" } }, this.types[Math.floor(Math.random() * 4)], 500 ); } } } </script> <style> #container { width: 300px; height: 120px; margin: 5px; } #buttons { display: flex; } </style>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Button } from 'devextreme-react/button'; import notify from 'devextreme/ui/notify'; const types = ['error', 'info', 'success', 'warning']; const showMessage = () => { notify( { message: "You have a new message", width: 230, position: { at: "bottom", my: "bottom", of: "#container" } }, types[Math.floor(Math.random() * 4)], 500 ); } function App() { return ( <div id="container"> <div id="buttons"> <Button text="Show message" onClick={showMessage} > </Button> </div> </div> ); } export default App;
#container { width: 300px; height: 120px; margin: 5px; } #buttons { display: flex; }
Show and Hide the Toast
When you need to show a notification, you can use one of the notify methods described in the section above. If you want, for example, to customize Toast content, bind the visible property of the Toast component to a component (Button in the example) property. After that, you can change this property to show or hide the Toast notification.
The example below shows how you can show and hide the Toast component without the content customization. To learn how to customize Toast content, refer to the section below.
Angular
<div id="container"> <div id="buttons"> <!-- ... --> <dx-button text="Show custom message" (onClick)="showCustomMessage()" > </dx-button> <dx-toast [(visible)]="isVisible" type="info" message="You have a new message" > <dxo-position my="bottom" at="bottom" of="#container"> </dxo-position> </dx-toast> </div> </div>
import { Component } from '@angular/core'; import notify from 'devextreme/ui/notify'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // ... isVisible: boolean = false; showCustomMessage() { this.isVisible = true; } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxButtonModule, DxToastModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxButtonModule, DxToastModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
<template> <div id="container"> <div id="buttons"> <!-- ... --> <dxButton text="Show custom message" @click="showCustomMessage" > </dxButton> </div> <dxToast v-model:visible="isVisible" type="info" message="You have a new message" > <DxPosition my="bottom" at="bottom" of="#container" /> </dxToast> </div> </div> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxButton } from 'devextreme-vue/button'; import { DxToast, DxPosition } from 'devextreme-vue/toast'; import notify from "devextreme/ui/notify"; export default { components: { DxButton, DxToast, DxPosition } data() { return { // ... isVisible: false }; }, methods: { // ... showCustomMessage() { this.isVisible = true; } } } </script> <style> /* */ </style>
React
import React, { useState } from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Button } from 'devextreme-react/button'; import { Toast, Position } from 'devextreme-react/toast'; import notify from 'devextreme/ui/notify'; function App() { const [isVisible, setIsVisible] = useState(false); const showCustomMessage = () => { setIsVisible(true); } const onHiding = () => { setIsVisible(false); } return ( <div id="container"> <div id="buttons"> <!-- ... --> <Button text="Show custom message" onClick={showCustomMessage} > </Button> </div> <Toast visible={isVisible} type="info" message="You have a new message" onHiding={onHiding} > <Position my="bottom" at="bottom" of="#container" /> </Toast> </div> ); } export default App;
Customize Toast Content
To customize toast content, either specify a contentTemplate function or a custom template inside a component. Use .dx-toast-custom
CSS class for the template and set the type property to custom
.
jQuery
$(function() { // ... $("#show-custom-message").dxButton({ text: "Show custom message", onClick: function() { DevExpress.ui.notify( { width: 230, height: 50, position: { my: "bottom", at: "bottom", of: "#container" }, contentTemplate: (element) => { element.append('<p>You have a new message</p> '); element.append('<i class="dx-icon-email icon-style"></i>'); } }, "custom", 500 ); }, }); });
<html> <head> <!-- ... --> </head> <body> <div id="container"> <div id="buttons"> <!-- ... --> <div id="show-custom-message"></div> </div> </div> </body> </html>
/* */ .dx-toast-custom { background-color: #F05B41; color: white; border-radius: 5px; padding: 2px; display: flex; align-items: center; justify-content: center; } .icon-style { margin-top: 3px; }
Angular
<div id="container"> <div id="buttons"> <!-- ... --> <dx-button text="Show custom message" (onClick)="showCustomMessage()" > </dx-button> <dx-toast [(visible)]="isVisible" [width]="230" [height]="50" type="custom" > <dxo-position my="bottom" at="bottom" of="#container"> </dxo-position> <div *dxTemplate="let data of 'content'"> <div class="flex-box"> <span>You have a new message </span> <i class="dx-icon-email icon-style"></i> </div> </div> </dx-toast> </div> </div>
import { Component } from '@angular/core'; import notify from 'devextreme/ui/notify'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // ... isVisible: boolean = false; showCustomMessage() { this.isVisible = true; } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxButtonModule, DxToastModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxButtonModule, DxToastModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
/* */ .dx-toast-custom { background-color: #F05B41; color: white; border-radius: 5px; padding: 2px; display: flex; align-items: center; justify-content: center; } .icon-style { margin-top: 3px; } .flex-box { width: 230px; height: 50px; display: flex; align-items: center; justify-content: center; }
Vue
<template> <div id="container"> <div id="buttons"> <!-- ... --> <dxButton text="Show custom message" @click="showCustomMessage" > </dxButton> </div> <dxToast v-model:visible="isVisible" content-template="custom-template" :width="230" :height="50" type="custom" > <DxPosition my="bottom" at="bottom" of="#container" /> <template #custom-template> <span>You have a new message </span> <i class='dx-icon-email icon-style'></i> </template> </dxToast> </div> </div> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxButton } from 'devextreme-vue/button'; import { DxToast, DxPosition } from 'devextreme-vue/toast'; import notify from "devextreme/ui/notify"; export default { components: { DxButton, DxToast, DxPosition } data() { return { // ... isVisible: false }; }, methods: { // ... showCustomMessage() { this.isVisible = true; } } } </script> <style> /* */ .dx-toast-custom { background-color: #F05B41; color: white; border-radius: 5px; padding: 2px; display: flex; align-items: center; justify-content: center; } .icon-style { margin-top: 3px; } </style>
React
import React, { useState } from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Button } from 'devextreme-react/button'; import { Toast, Position } from 'devextreme-react/toast'; import notify from 'devextreme/ui/notify'; function App() { const [isVisible, setIsVisible] = useState(false); const showCustomMessage = () => { setIsVisible(true); } const onHiding = () => { setIsVisible(false); } const contentRender = () => { return ( <div class="flex-box"> <span>You have a new message </span> <i class='dx-icon-email icon-style'></i> </div> ); } return ( <div id="container"> <div id="buttons"> <!-- ... --> <Button text="Show custom message" onClick={showCustomMessage} > </Button> </div> <Toast visible={isVisible} width={230} height={50} type="custom" contentRender={contentRender} onHiding={onHiding} > <Position my="bottom" at="bottom" of="#container" /> </Toast> </div> ); } export default App;
/* */ .dx-toast-custom { background-color: #F05B41; color: white; border-radius: 5px; padding: 2px; display: flex; align-items: center; justify-content: center; } .flex-box { display: flex; align-items: center; justify-content: center; } .icon-style { margin-top: 3px; }
If you have technical questions, please create a support ticket in the DevExpress Support Center.