angular-modal-library

Angular Modal Library

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

Prerequisites

Before you begin, ensure you have met the following requirements:

• You have installed the latest version of @angular 8+
• You have a Windows/Linux/Mac machine.

Installing angular-modal-library

To install angular-modal-library, follow these steps:

Linux and macOS:

npm install angular-modal-library

Windows:

npm install angular-modal-library

Using 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)

Contributing to angular-modal-library

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.

Contributors

Thanks to the following people who have contributed to this project:

• @siddhant-dev 📖

Contact

If you want to contact me you can reach me at [e-mail].

License

This project uses the following license: MIT .

KeyWords

#angular #Modal