ngx-toast (Standalone Angular Component)

ngx-toast is a lightweight and customizable Angular standalone component for displaying non-intrusive toast notifications in your application. It allows you to show messages like success, error, info, or warning notifications without blocking the user’s interaction with the app.

Features

• Easy to use and configure
• Customizable appearance (position, duration, type, etc.)
• Standalone component (no need to modify AppModule)
• Supports success, error, info, and warning messages
• Lightweight and fast

Angular Version Compatibility

| Angular Version | Package Version | |----------------|-----------------| | 16.x.x | 1.x.x | | 17.x.x | 2.x.x | | 20.x.x | 3.x.x |

Installation

To install ngx-toast in your Angular project, use the following command:

npm install @hm-app/ngx-toast --save

Usage

1. Import the Standalone Component

After installation, you can directly use the NgxToastModule in your Angular components without needing to modify your AppModule.

import { NgxToastComponent } from '@hm-app/ngx-toast';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxToastModule],
  template: `
        <ngx-toast />
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  // Your component logic here
}

2. Show Toast Notifications

In your component, inject the NgxToastComponent to show toast messages.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class YourComponent {
  constructor(private toastService: NgxToastService) {}

  showSuccessToast() {
    this.toastService.success('Add', 'Operation successful!', { 
      duration: 3000, // Duration in milliseconds
    });
  }

  showErrorToast() {
    this.toastService.error('Add', 'An error occurred!', { 
      duration: 3000 
    });
  }
}

3. HTML Template Example

Add buttons or other elements in the HTML template to trigger the toasts:

<button (click)="showSuccessToast()">Show Success Toast</button>
<button (click)="showErrorToast()">Show Error Toast</button>

Customization

You can customize the appearance of the toast notifications by modifying CSS variables. Add these variables to your global styles or component styles:

@layer ngx-toast {
  :root {
    /* Font Families */
    --ngx-toast-semibold-font-family: 'Inter', system-ui, sans-serif;
    --ngx-toast-bold-font-family: 'Inter', system-ui, sans-serif;
    --ngx-toast-normal-font-family: 'Inter', system-ui, sans-serif;

    /* Success Colors */
    --ngx-toast-confirm-color: #22c55e;
    --ngx-toast-confirm-bg-color: rgba(34, 197, 94, 0.1);

    /* Error Colors */
    --ngx-toast-error-color: #ef4444;
    --ngx-toast-error-bg-color: rgba(239, 68, 68, 0.1);

    /* Warning Colors */
    --ngx-toast-warning-color: #f59e0b;
    --ngx-toast-warning-bg-color: rgba(245, 158, 11, 0.1);

    /* Info Colors */
    --ngx-toast-info-color: #3b82f6;
    --ngx-toast-info-bg-color: rgba(59, 130, 246, 0.1);

    /* Action Button Colors */
    --ngx-toast-action-color: #3b82f6;
    --ngx-toast-action-hover-color: #2563eb;
    --ngx-toast-action-focus-color: #60a5fa;
    --ngx-toast-action-outline-color: #93c5fd;
  }
}

Available CSS Variables

| Variable | Description | Default Value | |----------|-------------|---------------| | Font Families | | --ngx-toast-semibold-font-family | Font family for semi-bold text | 'Inter', system-ui, sans-serif | | --ngx-toast-bold-font-family | Font family for bold text | 'Inter', system-ui, sans-serif | | --ngx-toast-normal-font-family | Font family for normal text | 'Inter', system-ui, sans-serif | | Success Colors | | --ngx-toast-confirm-color | Color for success messages | #22c55e | | --ngx-toast-confirm-bg-color | Background color for success toasts | rgba(34, 197, 94, 0.1) | | Error Colors | | --ngx-toast-error-color | Color for error messages | #ef4444 | | --ngx-toast-error-bg-color | Background color for error toasts | rgba(239, 68, 68, 0.1) | | Warning Colors | | --ngx-toast-warning-color | Color for warning messages | #f59e0b | | --ngx-toast-warning-bg-color | Background color for warning toasts | rgba(245, 158, 11, 0.1) | | Info Colors | | --ngx-toast-info-color | Color for info messages | #3b82f6 | | --ngx-toast-info-bg-color | Background color for info toasts | rgba(59, 130, 246, 0.1) | | Action Button Colors | | --ngx-toast-action-color | Main action button color | #3b82f6 | | --ngx-toast-action-hover-color | Action button hover color | #2563eb | | --ngx-toast-action-focus-color | Action button focus color | #60a5fa | | --ngx-toast-action-outline-color | Action button focus outline color | #93c5fd |

License

@hm-app/ngx-toast is released under the MIT License.