npm package: @hm-app/ngx-toast
Description: `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
Latest version: 20.0.1

# 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:

```bash
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.

```typescript
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.

```typescript
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:

```html
<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:

```css
@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.