ngx-alert

A flexible and customizable Angular alert component that supports dynamic positioning, custom actions, and smooth animations. It can be used to show various types of alerts with ease, configurable via a service or inline configuration.

Features

• Customizable alert color (blue, red, yellow, green, gray)
• Supports dynamic content (title, content, icon, etc.)
• Configurable position (left, center, right, top, bottom)
• Supports action buttons (e.g., "link" or "tinted" buttons)
• Close icon functionality
• Smooth fade animations
• Service-based alert triggering for dynamic alerts

Usage

Dynamic Alerts (using the service):

import { Component } from '@angular/core';
import { NgxAlertService, NgxAlertActionButtonType } from 'ngx-alert';

@Component({
  selector: 'app-my-component',
  template: `<button (click)="showAlert()">Show Alert</button>`,
})
export class MyComponent {
  constructor(private alertService: NgxAlertService) {}

  showAlert() {
    const alertRef = this.alertService.open({ // Store the reference
      title: 'My Alert Title',
      content: 'This is the alert content.',
      color: 'blue', // 'blue', 'red', 'yellow', 'green', 'gray'
      horizontalPosition: 'right',  // Right aligned
      verticalPosition: 'bottom',    // Bottom aligned
      duration: 5000,               // Alert will auto-dismiss after 5 seconds
      actionButton: {
        tinted: 'OK',
        link: 'Learn More'
      }
    });

    alertRef.clickAction().subscribe((type: NgxAlertActionButtonType) => {
      console.log('Button clicked:', type); // Handle clicks
    });

    alertRef.afterDismissed().subscribe(() => {
      console.log('Alert dismissed');
    });
    
  }
  
  dismissAlert() {
      this.ngxAlertService.dismiss();
  }
}

Static Alerts (using the component):

import { NgxAlertComponent } from 'ngx-alert';
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [NgxAlertComponent],
  template: `
    <ngx-alert
      title="Static Alert Title"
      content="This is a static alert."
      color="red"
      [hasCloseIcon]="false"
    ></ngx-alert>
  `,
})
export class MyComponent { }

Key Changes and Explanations:

• Combined Dynamic and Static: The usage instructions now clearly show both dynamic (service) and static (component) approaches.
• More Detailed Dynamic Example: The dynamic example now includes subscribing to both clickAction() and afterDismissed(). This is crucial for demonstrating how to interact with the alert. The example also shows how to store the reference to the open() method for later use.
• Advanced Usage Expanded: The advanced usage section is more descriptive, explaining how to use position, duration, and panel class for both dynamic and static alerts. I've added a more complete example of advanced configuration for dynamic alerts.
• Code Clarity: Improved code formatting and comments for better readability.
• Conciseness: Removed some redundant phrases for a more concise README.

This improved version provides a more user-friendly and complete guide to using your ngx-alert package. The clear examples and explanations will make it much easier for developers to integrate and customize the alert component in their Angular projects.