quick-alert

⚡ Quick Alert for Angular 20+

Quick Alert is a lightweight, standalone, and dependency-free alert/toast notification service for Angular 20+. It provides a fast, flexible way to display success, error, info, or warning messages in modern Angular apps.

✅ Angular 20+ support (standalone & modular)
💡 Zero configuration — instant alerts 🎨 Fully customizable via CSS variables

🚀 What's New in v1.0.0

• Updated README with clearer usage instructions

📦 Installation

npm install quick-alert

🧩 Usage

Step 1: Import & Inject

import { Quick } from 'quick-alert';
export class <ComponentName> {
   private alert = inject(Quick);

   showAlert(): void {
    this.alert.fire({
      title: 'Lorem Ipsum is simply dummy text',
      subtitle: 'Sub Title',
      message: `Lorem Ipsum is simply dummy text of the printing and typesetting industry.`,
      type: 'success',
      toast: true,
      showCloseButton: true,
      timeout: 5000
    });

    this.alert.on('confirm', (event: any) => {
      console.log('Confirmed:', event);
    });
  }
}

🎨 Theming with CSS Variables

Quick Alert supports full customization using CSS variables inside your component or global styles:

:host {
  --color: #101010;
  --backgroundColor: rgba(255, 255, 255, 0.8);
  --backgroundOverlayColor: rgba(0, 0, 0, 0.5);
  --progressbarColor: #ccc;
  --buttonBackgroundColor: #101010;
  --buttonHoverBackgroundColor: #757575;
  --buttonColor: #fff;
}

📛 Badges

📄 License