Angular Modal Library
Tags: angular, frontend, npm, reusablelibrary
Published: 2019-12-03 05:20:36

---
title: Angular Modal Library
published: true
description: Modal is something every application needs and with angular-modal-library, I aim to make it much more easy for developers to implemented it without having to import heavy 3rd party library like Angular Material
tags: Angular, frontend, npm, reusablelibrary,
---

Hi I have learning front end development for past 2 years (mostly Angular) and I have built few apps of my own which you can check out here:


•	[Tic Tac Game](https://tic-tacgame.web.app/)
•	[Weather App](https://liveweatherforcast.web.app/)


While working on these projects I wanted to add Modal to the weather app but I was not able to find right library. Angular Material is quite big and I was worried that it would increase my bundle size. Other libraries which I looked were not satisfactory. Then I came across one few tutorials on how to create modal feature in Angular. 
I was inspired by that and created in my test project and it was working fine, but there were no animations on how the modal would appear it would just come right out when clicked to activate it and I was not happy to I made my own modal with slide down animation. 


It’s at this moment I knew I f**ked up 😂😂😂😂 just kidding.  
I realized that it would be better if made it reusable so that I can use it in my future projects and by this way I could try to return something back to the community of Open Source which has empowered me.  Thus I started working on the Library and within 3 days I published my first ever library to NPM https://www.npmjs.com/package/angular-modal-library .

Enough of Intro (might be pretty long intro 😅) lets come to part how to install and use it. 
Well installation is quite simple just use the following commands: 

`npm i angular-modal-library`

**Note: Changed the Selector from ng-modal to sj-modal. As suggested by [Andy Wright](https://dev.to/atwright147), that ng tags are reserved for angular itself. 

Once installation is complete you need to import `ModalModule` and `ModalService` from `angular-modal-library` 
Once that is done at to your imports array as well. 
`ModalService` provides two functions `open(id)` and `close(id)`. 
In the html of the component where you want it to displayed add the following code : 
```html
<sj-modal id="my-modal">
  <div>
    HI
  </div>
  <button (click)="closeModal('my-modal')">Close </button>
</sj-modal>
```
Please note the id (my-modal in this case) needs to add as the parameter where you call the open function on the html for example you want modal to open by click of a button then add the following code : 

```html
<button (click)="openModal('my-modal')">Open</button>
```
Now in the component.ts file you need import `ModalService` and declare it in constructor.
```javascript
constructor(private modal: ModalService) {} 
``` 
To open the modal, use the following code:
```javascript
openModal(id){
this.modal.open(id)
}
//close function
closeModal(id){
this.modal.close(id)
}
```
The classes used in Modal library for styling are as follow:
`.modal`  `.modal-body`  `.modal-background`  `.modal-open` (self-explanatory classes) 
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)

If you wish to contribute and improve the modal library then here is the [GitHub repo]( https://github.com/siddhant-dev/angular-modal-library)

###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]( https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request).

Thanks a lot and happy Codding 🕹💻