Customizable Alert Boxes for Angular Applications

alerts

As developers, we often need to display informative messages or alerts to our users. To make this task easier and more flexible in Angular applications, we’ve developed a new library called ng-alert-box-popup. This library allows you to quickly integrate customizable alert boxes with support for various types of alerts using the popular SweetAlert2 library.

Why Use ng-alert-box-popup?

Alerts play a crucial role in communicating important information or errors to users in a user-friendly way. With ng-alert-box-popup, you can enhance the user experience by creating visually appealing and interactive alerts that match the look and feel of your Angular application.

Features

• Display different types of alerts: success, error, warning, info.
• Customize the alert title, message, and appearance.
• Built on top of the powerful SweetAlert2 library.
• Seamless integration into Angular applications.

Getting Started

To get started with ng-alert-box-popup, follow these simple steps:

1. stall the library using npm:

npm install ng-alert-box-popup

npm i sweetalert2@7.33.1

2.Import the NgAlertBoxModule into your application’s Components:

import {NgAlertBoxComponent} from "ng-alert-box-popup";

Using ng-alert-box-popup

Once the library is imported, you can easily create and display alerts in your components. Here’s a quick example:

   this.alerts.dialog('I','Example Error');

import { Component } from '@angular/core';
import { NgAlertBoxService } from 'ng-alert-box-popup';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="showSuccessAlert()">Show Success Alert</button>
    <button (click)="showErrorAlert()">Show Error Alert</button>
  `
})
export class AppComponent {

  constructor(private alerts: NgAlertBoxService) {}

  showSuccessAlert() {
      this.alerts.dialog('E','Example Error');
  }

  showErrorAlert() {
      this.alerts.dialog('I','Example Error');
  }
}

Conclusion

With ng-alert-box-popup, creating and displaying alerts in your Angular application becomes a breeze. Whether you want to inform users about a successful action, provide feedback on an error, or simply deliver important messages, our library has you covered.

We’re excited to see how ng-alert-box-popup enhances your application's user experience. Feel free to contribute, report issues, or give feedback on our GitHub repository.

Happy coding!