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 …


This content originally appeared on DEV Community and was authored by Boris Jenicek

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


This content originally appeared on DEV Community and was authored by Boris Jenicek


Print Share Comment Cite Upload Translate Updates
APA

Boris Jenicek | Sciencx (2021-05-24T20:59:35+00:00) ngx-awesome-popup Interactive modals on steroids ?. Retrieved from https://www.scien.cx/2021/05/24/ngx-awesome-popup-interactive-modals-on-steroids-%f0%9f%9a%80/

MLA
" » ngx-awesome-popup Interactive modals on steroids ?." Boris Jenicek | Sciencx - Monday May 24, 2021, https://www.scien.cx/2021/05/24/ngx-awesome-popup-interactive-modals-on-steroids-%f0%9f%9a%80/
HARVARD
Boris Jenicek | Sciencx Monday May 24, 2021 » ngx-awesome-popup Interactive modals on steroids ?., viewed ,<https://www.scien.cx/2021/05/24/ngx-awesome-popup-interactive-modals-on-steroids-%f0%9f%9a%80/>
VANCOUVER
Boris Jenicek | Sciencx - » ngx-awesome-popup Interactive modals on steroids ?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/24/ngx-awesome-popup-interactive-modals-on-steroids-%f0%9f%9a%80/
CHICAGO
" » ngx-awesome-popup Interactive modals on steroids ?." Boris Jenicek | Sciencx - Accessed . https://www.scien.cx/2021/05/24/ngx-awesome-popup-interactive-modals-on-steroids-%f0%9f%9a%80/
IEEE
" » ngx-awesome-popup Interactive modals on steroids ?." Boris Jenicek | Sciencx [Online]. Available: https://www.scien.cx/2021/05/24/ngx-awesome-popup-interactive-modals-on-steroids-%f0%9f%9a%80/. [Accessed: ]
rf:citation
» ngx-awesome-popup Interactive modals on steroids ? | Boris Jenicek | Sciencx | https://www.scien.cx/2021/05/24/ngx-awesome-popup-interactive-modals-on-steroids-%f0%9f%9a%80/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.