notify-dash

Notify Dash - Toast Notifications for Angular

This library provides an easy way to display toast notifications in your Angular application.

Supports Angular 16, 17, and 18.

Screenshots

Installation

Install via npm:

npm install notify-dash

Setup

1. Import ToastModule in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { ToastModule } from 'notify-dash';

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

2. Use ToastService in your component Import and inject ToastService where you want to use the toast notifications:

import { Component } from '@angular/core';
import { ToastService } from 'notify-dash';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {

  constructor(private toastService: ToastService) {}

  showSuccess() {
    this.toastService.success('Operation completed successfully!', 3000, 'top-right');
  }

  showError() {
    this.toastService.error('An error occurred. Please try again.', 3000, 'top-right');
  }

  showWarning() {
    this.toastService.warning('Please proceed with caution.', 3000, 'top-right');
  }

  showInfo() {
    this.toastService.info('Here\'s some useful information.', 3000, 'top-right');
  }

  showAtPosition(position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left') {
    this.toastService.success(`Toast shown at ${position} position`, 5000, position);
  }
}

In component's html template:

<notify-toast></notify-toast>

Toast Methods

• success(message: string, duration?: number, position?: string)

• error(message: string, duration?: number, position?: string)

• warning(message: string, duration?: number, position?: string)

• info(message: string, duration?: number, position?: string)

Parameters

• message: string — The message you want to display.
• duration: number — Duration in milliseconds (default: 3000).
• position: string — Toast position. Accepted values: 'top-right', 'top-left', 'bottom-right', 'bottom-left'.

Example

this.toastService.success('Profile updated successfully!', 4000, 'bottom-left');