JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 20
  • Score
    100M100P100Q62129F
  • License MIT

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message with custom theme based.

Package Exports

  • ngx-toast-notify
  • ngx-toast-notify/package.json

Readme

Welcome to ngx-toast-notify!

For Angular 17 + (standalone component)

ngx-toast-notify npm version ngx-toast-notify

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message with custom theme based.

Features: Positioned toast notifications with allows custom theme as responsive

Install: npm install ngx-toast-notify



Import

On a component or service inject the toast service as follows

import { NgxToastNotifyService } from 'ngx-toast-notify';

constructor(private  toast: NgxToastNotifyService) {}

public showToastTopLeft() {
  this.NgxToastNotifyService.showToast("Top left", "primary", "top-left");
}

public showToastTopRight() {
  this.NgxToastNotifyService.showToast("Top right", "warning", "top-right");
}

public showToastBottomLeft() {
  this.NgxToastNotifyService.showToast("Bottom left", "info", "bottom-left");
}

public showToastBottomRight() {
  this.NgxToastNotifyService.showToast( "bottom-right", "danger", "bottom-right");
}

public showToastTopCenter() {
  this.NgxToastNotifyService.showToast("top-center", "dark", "top-center");
}

public showToastBottomCenter() {
  this.NgxToastNotifyService.showToast("bottom-center", "light", "bottom-center");
}
Workflow:
showToast(text: string, mode: string, position: string): Creates toast notification.

text  — : Toast text to be shown. - String
mode  — : Toast appearance as - primary | warning | danger | success | info - String
position  — : Toast position at - top-left | top-right | bottom-left | bottom-right | top-center | bottom-center