Angular Modal Library

#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
• Weather 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, 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 :

<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 :

<button (click)="openModal('my-modal')">Open</button>

Now in the component.ts file you need import ModalService and declare it in constructor.

constructor(private modal: ModalService) {}

To open the modal, use the following code:

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

Contributing to angular-modal-library

To contribute to angular-modal-library, follow these steps:
• Fork this repository.
• Create a branch: git checkout -b .
• 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 a lot and happy Codding 🕹💻

Top comments (4)

Andy Wright • Dec 3 '19 • Edited

Looks great, thank you for posting this.

May I suggest you change the selector prefix from ng- (ng-modal), to something else? ng- is meant to be reserved for use by Angular itself. The issue is, if Angular adds a component called ng-modal internally (unlikely, but possible), your component will conflict with that. Also it is unclear whether or not this component is official or not.