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
});
confirmBox.openConfirmBox$().subscribe(resp => {
// button response
});
}
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)
]);
dialogPopup.openDialog$().subscribe(resp => {
// button response
});
}
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
Top comments (0)