Complete Angular UI library |Primeng Components

Angular 15 Primeng tutorials In this post, We will go through the what is Primeng Framework, explains about different UI components .

What is Primeng?

Primeng is a popular Angular Framework UI library. This was created by the Primefaces team at Primetek company.

Primetek has created rich UI libraries for different languages.

  • Primefaces is a java library for JSF UI reusable components.
  • PrimeUI HTML5 JQuery UI framework
  • Primeng UI library is based on typescript language for the Angular framework.
  • PrimeReact is a Complete UI component library for ReactJs.
  • PrimeVue is a UI component toolkit for Vuejs.

It is open source under the Apache license.

Angular is a popular MVC framework from Google for Developing software applications. There are fewer free UI Libraries for rich UI components. It provides UI controls from input controls like Button, label, and data tables, trees, and UI themes.

It has support for Angular 10,11 and the latest versions. It provides an npm library to integrate into your project.

Primeng features lists

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

Primeng Form Input UI Controls

Input UI controls are used to design UI forms to take input from the user. Primeng provides complete Form input control set and widgets like Textbox, Textarea, Dropdown, Radio buttons, Multi Selects, Calendars and Spinners

Normal Buttons and SplitButton are also available.

Primeng 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 displays the events in full calendar mode. and also several available components, Datascroller, order list, and Carousel components in the slider.

Primeng Charts components

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

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

component nameLinkmodule
bar chartAngular bar chartChartModule

PrimeDesigner API:

This is a powerful Designer tool to design your 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 a custom icons library called primeicons.

These icons are used by Primefaces and PrimeUI library. This library also uses the font awesome icon library.

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

  • Using Primeng with the Angular CLI tool
  • Using the SystemJS library
  • Using Primeng with web pack bundler

This is a list of primeng components and their modules

component nameModule
<p-accordion><p-accordionTab>Accordion Component
<p-toast><p-toast>[Primeng Toast] (primeng-angular-toast-example)

Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.