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
Confirm box
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

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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.