While working on a private project I needed a popup for my AngularJS based landingpage to show when a button was clicked containing some information. I was confident the huge AngularJS community had already invented such a thing and Googled around to look for options.
There is always the option to build things yourself, but since I didn’t want to spend my time customizing code and functionality. Besided that I believed my goal – showing a dialog after a button click that showed content with a dismiss button – was so common that there just HAD to be a solution waiting for me.
More on my AngularJS Dialog component quest after the break.[ad name=”Large Rectangle”]
And it turns out there was a nice open-source solution, GitHub hosted and all, in the form of ngDialog (https://github.com/likeastore/ngDialog). My target project is build with a Yeoman generator (called generator-gulp-angular) for AngularJS based projects with Gulp integrated.
I always like to choose components that have minimal or no dependancies so they can be re-used in future projects without having to keep tabs on what frameworks I need to base them on. It gives my flexibility while having components that I truly get to know well after using them two or three times.
And independence is a great asset of ngDialog. Here’s an overview of features what made me try it out:
- no dependancies
- possibility to apply theming by specifying a class name to indicate what CSS styling needs to be applied
- the possibilities to both specify inline content or an external “template” file to be used for the content of the dialog
- it’s possible to define a controller that will handle interaction with the dialog. Not what I needed right now but I might just be using this in the near future
Installing was a breeze using Bower:
[crayon-5b7c9d1a22cee695440954/] And making the dialog appear is as easy as calling .open with a reference to the template file:
[crayon-5b7c9d1a22cff230648873/] Lots of stuff possible with this nice component, so be sure to check it out on the ngDialog GitHub repo!