Implement Toaster In Angular With DevExpress

Overview :

– Toasts are lightweight alerts intended to resemble the push notifications used by mobile and desktop operating systems. Because they are constructed with flexbox, they are simple to align and position.

– Toast is a user interface component that shows pop-up alerts.

– When you want to show a toaster you need to define its properties like the messagetype, and displayTime

You can select one of four predefined notification kinds depending on the message’s mood  :

  • ‘info’
    It is the blue toast display on the screen with a bubble icon.
  • ‘warning’
    It is the yellow toast display on the screen with an exclamation mark icon.
  • ‘error’
    It is the red toast display on the screen with an X icon.
  • ‘Success’
    It is the green toast display on the screen with a checkmark icon.

App.Component.Html :

<div id="product-list">
  <h1>Product List</h1>
    <li *ngFor="let product of products">
      <img [src]="product.ImageSrc" />
      <div>{{ product.Name }}</div>
        text="Demo CheckBox"
  <dx-toast [(visible)]="isVisible" [type]="type" [message]="message">

App.Component.ts :

import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } 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( {

  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();

  function1(e) {
    const type = e.value ? 'success' : 'error';
    const text = e.value ? ' You Checked the checkbox' : ' You Unchecked the checkbox');

    this.type = type;
    this.message = text;
    this.isVisible = true;

  imports: [
  declarations: [AppComponent],
  bootstrap: [AppComponent],
export class AppModule {}


Output :

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories