May 24, 2021 08:59 pm GMT
Original Link: https://dev.to/costlydeveloper/ngx-awesome-popup-interactive-modals-on-steroids-2ej3
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
Confirm box
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:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To