@hudan0604/modalzzz
v1.0.2
Published
A library that enables users to easily add diferent types of modals to their projects: confirm, warning, and custom modal
Downloads
10
Readme
Modalzzz
This is a modals library, generated with Angular CLI version 13.2.0.
It enables users to easily add modals to their project
There are 3 availables types of modals : confirm, warning , and custom
Link to the github repo
Visit https://github.com/hudan0604/Modalzzz-demo for the demo
First things first
$ npm i @hudan0604/modalzzz
- Then, in your app.module.ts file, add 'ModalzzzModule' to the 'imports' of the module
- In 'angular.json' file, inside the 'assets' array :
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/test",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": []
Add this configuration object (in order to see the close icon of the modal) :
{
"glob": "**/*",
"input": "node_modules/@hudan0604/modalzzz/assets/",
"output": "/assets"
}
- In your app.component.html file, add the selector of the modal component :
<lib-modalzzz></lib-modalzzz>
How to open a modal
In the component where you want to open a modal :
- create this property:
modalStatusSubscription: Subscription | undefined;
- add this to the parameters of your constructor:
private modalzService: ModalzService
- create a method like this one :
openModal(config: ModalConfig) {
this.modalStatusSubscription = this.modalzService
.open({
// 3 types, either 'confirm' | 'warning' | 'custom'
type: config.type,
// Modal title
title: config.title,
body: config.body,
customStyles: config.customStyles,
})
.subscribe(({ isModalValidated, isModalClosed }) => {
if (isModalValidated) {
/**
* Here you can do what you want after knowing that the user has submitted the modal
* For example : if the modal contains a form, you would want to send this data to backend
* if the server sends a 200 status: this.modalzService.close({ config });
* If the server sends an error: you could keep the modal opened
*/
}
}
/**
* This one has to be included in your code
* because if the user quits the modal,
* next time he opens it,
* the observable will still be emitting
*/
if (isModalClosed) {
this.modalStatusSubscription?.unsubscribe();
}
});
}
- If you want to open the confirmation modal : in your html template just call the openModal() method like this:
click = "openModal({ type: 'confirm' })";
Same for the 'warning' modal :
click = "openModal({ type: 'warning' })";
For the custom modal you can choose to have a title and buttons, you can specify title's background and color, body bg and color, and buttons bg and color too :
(click)="
openModal({
type: 'custom',
title: 'Other title !',
body: 'Title with custom bg, custom buttons',
customStyles: {
title: {
background: 'purple',
color: 'white'
},
body: {
background: '#7b5de8'
},
buttons: {
cancelBtn: {
background: 'rgb(225 127 33)'
},
submitBtn: {
title: 'Other text',
background: '#da2c4b'
}
}
}
})
"