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 message, type, 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>
  <ul>
    <li *ngFor="let product of products">
      <img [src]="product.ImageSrc" />
      <div>{{ product.Name }}</div>
      <dx-check-box
        text="Demo CheckBox"
        (onValueChanged)="function1($event)"
      >
      </dx-check-box>
    </li>
  </ul>
  <dx-toast [(visible)]="isVisible" [type]="type" [message]="message">
  </dx-toast>
</div>

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

  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;
  }
}

@NgModule({
  imports: [
    BrowserModule,
    DxCheckBoxModule,
    DxToastModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

Output :