/ AngularJS

PrimeNG : UI Library

I have been working with AngularJS for quite some time and have discovered various features it can offer to users with maximum flexibility.
PrimeNG is one of the open source libraries for creating user interface components within your AngularJS project. It contains a collection of components which can be customized and rendered according to your purpose.
What I really liked about this library, is the easy process of integrating a component within the application.
Here is an example of my 'Upload' component in my TimeSheet application, which I have built using PrimeNG.

The first step is to include your primeng component by importing it in your module i.e in your app.module.ts file. This is similar to telling your angular application, that we will be using this component. I am using PanelModule. By including it in the imports array, it is now exposed and can be used in any part of my project!
The reference on how to use PanelModule can be found in the PrimeNG documentation:



For the next step, I created a form in my Upload Component using 'panel-header'. To get a neat look of the interface, I styled the child elements using class="ui-g-12 ui-md-2" and class="ui-g-12 ui-md-10">. This helps in occupying the form for the entire width. The ui-md-2 class will occupy 2 parts out of 12 and ui-md-10 will occupy remaining 10 parts. I have defined 'md' which is for dividing columns for medium screens.


I came across the font-awesome icon library, which is extremely cool with numerous icons available for free. They also have a documentation on how to use these on their website : https://fontawesome.com/icons?d=gallery

Once my angular app is rendered, my Upload component will look like this:


PrimeNG is an interesting library to work with and I will definitely be diving more into it in the future as well!
View my application live on firebase with the link and source code:
TimeSheet; GitHub

PrimeNG : UI Library
Share this

Subscribe to Rujuta Mahindrakar