DEV Community

loading...
Cover image for ngx-awesome-popup Interactive modals on steroids 🚀

ngx-awesome-popup Interactive modals on steroids 🚀

Boris Jenicek
I'm a star wars fan, and also an Angular developer with several years of professional experience.
・2 min read

What is it?

It's the npm library made for the Angular 9+

What it does?

It provides:

  • Evoking dynamic components in popup
  • Toast Notifications
  • Alert Box
  • Confirm Box
  • Cookie GDPR banner

Why it is better than others?

It has:

  • Clean API
  • Better documented than others
  • Easy to use
  • d.ts files
  • Awesome snippet generator
  • Ability of global or local configuration
  • Predefined styles
  • Easy to change colors
  • Button generator
  • Simple and powerful Dependency Injection

Show me the API!

Okay

toastNotification() {
        const newToastNotification = new ToastNotificationInitializer();
        newToastNotification.setTitle('Title!');
        newToastNotification.setMessage('Message!');
        newToastNotification.setConfig({
            LayoutType: DialogLayoutDisplay.INFO // SUCCESS | INFO | NONE | DANGER | WARNING
        });
        newToastNotification.openToastNotification$();
    }
Enter fullscreen mode Exit fullscreen mode
confirmBox() {
        const confirmBox = new ConfirmBoxInitializer();
        confirmBox.setTitle('Title!');
        confirmBox.setMessage('Message!');
        confirmBox.setButtonLabels('Button1', 'Button2'); 
        confirmBox.setConfig({
            LayoutType: DialogLayoutDisplay.SUCCESS // SUCCESS | INFO | NONE | DANGER | WARNING
        });
        const subscription = confirmBox.openConfirmBox$().subscribe(resp => {
            // button response
            subscription.unsubscribe();
        });
    }
Enter fullscreen mode Exit fullscreen mode
dialog() {
        const dialogPopup = new DialogInitializer(AnyAngularComponent);
        dialogPopup.setCustomData({myData}); 
        dialogPopup.setConfig({
            Width     : '500px',
        );

        dialogPopup.setButtons([
            new ButtonMaker('Submit', 'submit', ButtonLayoutDisplay.SUCCESS),
            new ButtonMaker('Cancel', 'cancel', ButtonLayoutDisplay.SECONDARY)
        ]);

        const subscription = dialogPopup.openDialog$().subscribe(resp => {
            // button response
            subscription.unsubscribe();
        });
    }
Enter fullscreen mode Exit fullscreen mode

How does it look like?

Here's how!

Toast Notifications

Toast

Confirm box

Confirm box

Cookie banner

Cookie banner

Where to see more?

Toast - playground
Toast - StackBlitz
Confirm box - playground
Confirm box - StackBlitz
Dialog - playground

Discussion (0)