Angular Toast - Getting Started
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".
- <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;
- }
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.
- <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 { }
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
.
- <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;
- }
If you have technical questions, please create a support ticket in the DevExpress Support Center.