Learn Primeng Angular UI Library with examples

Primeng Introduction.

primeng angular 6 library

It is a popular UI library for Angular 2 This is developed by Primefaces team from a company called Primetek. Primetek company has developed rich UI libraries like primefaces - JSF  UI library java language and PrimeUI - HTML5 JQuery UI framework. Primeng UI library is based on typescript language and Angular framework. It is open source under Apache license. Angular is a popular MVC framework from Google for Developing software applications. There are less free UI Libraries for rich UI components. It provides UI controls from input controls like Button, label, and data tables, trees. 

It has support for Angular 2 and Angular 4/5/6 versions. Version 6 is not tested fully. It provides npm library to integrate into your project. 

Primeng Basic features 

1. Provides Rich Inbuilt controls 2. Rich Data table with sorting, filtering, and pagination 3. Theme Designer 4. Support All browsers 5. Native mobile 6. Opensource and free to use 7. Responsive same code base works in all devices from desktop to mobile devices. 8. Inbuilt Themes supports. And also provides tools to create/customize own themes. 9. Integration with REST API to consume JSON format data.

Primefaces Components support

Input UI Controls.

Input UI controls are used to design UI forms to take input from the user. There are Several UI Inbuilt components and widgets like Textbox, Textarea, Dropdown, Radio buttons, Multi Selects, Calendars and Spinners

Normal Buttons and SplitButton also available

Data Controls

  There are several data controls to display data in table format as well as tree format ie TurboTable, DataView and Tree and Tree table. And also Scheduler widget is to display the events in the full calendar mode. and also several available components, Datascroller,orderList, Carousel components in the slider.

Charts Controls

 Charts are basically used to display the data in the form of charts. Priming charts based on  ChartJS library. You need to install this library first to use charts.

 Bar, Line, Pie, PolarArea, Doughnut charts are available.

PrimeDesigner API

This is a powerful Designer tool to design your own themes based on primeng styles. It has support for Sass Styling and this is not free but licensed

Primeng Icons

All the components used in this library internally use custom icons library called primeicons. These icons used by Primefaces and PrimeUI library. This library also uses font awesome icons library along with this.

We will see the list of examples and other articles in future posts

This library can be used in your project in many ways. 

1. Using Primeng with Angular CLI tool

2. Using SystemJS library

3. Using Primeng with web pack bunder

##Integerate Primeng to existing Angular applications This is list of primeng components and their modules

component name Module
<p-accordion><p-accordionTab> AccordionModule
<p-toast><p-toast> ToastModule
<p-tree><p-tree> TreeModule
<p-table></p-table> TableModule

Similar Posts