Project name is a angular-modal-library that allows inset a modal on any angular component to do various task.
This popup will appear after calling a function with Id of the modal as parameter. Very easy to use and you can customise the functionlity inside the modal
Before you begin, ensure you have met the following requirements:
- You have installed the latest version of
@angular 8+ - You have a
Windows/Linux/Macmachine.
To install angular-modal-library, follow these steps:
Linux and macOS:
npm install angular-modal-library
Windows:
npm install angular-modal-library
To use angular-modal-library, follow these steps:
import ModalModule from angular-modal-library in your app.module.ts file
import ModalService from angular-modal-library in your <your-component>.componenet.ts file
ModalService provides two functions opne(id) openeing and close(id) closing make sure pass the modal id as the parameter in both the functions
in the html create a button and on click it should call the open function.
Also create the modal as shown in the example below:
<sj-modal id="my-modal">
<div>
HI
</div>
<button (click)="closeModal('my-modal')">Close </button>
</sj-modal>
Close button will be inside the modal to close it.
The classes used in Modal library for styling are as follow:
.modal .modal-body .modal-background .modal-open
It is also responsive for mobile devices with an slide down animation.
to custom styling you will need to use ElementRef. (Google it and experiment with it)
To contribute to angular-modal-library, follow these steps:
- Fork this repository.
- Create a branch:
git checkout -b <branch_name>. - Make your changes and commit them:
git commit -m '<commit_message>' - Push to the original branch:
git push origin <project_name>/<location> - Create the pull request.
Alternatively see the GitHub documentation on creating a pull request.
Thanks to the following people who have contributed to this project:
If you want to contact me you can reach me at [email protected].
This project uses the following license: MIT .
#angular #Modal