Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 24, 2021 08:59 pm GMT

ngx-awesome-popup Interactive modals on steroids

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$();    }
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();        });    }
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();        });    }

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


Original Link: https://dev.to/costlydeveloper/ngx-awesome-popup-interactive-modals-on-steroids-2ej3

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To