{

Complete Angular UI library |Primeng Components


Angular 13 Primeng tutorials

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.

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.

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.

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 name Link module
bar chart Angular bar chart ChartModule

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 name Module
<p-accordion><p-accordionTab> Accordion Component
<p-toast><p-toast> [Primeng Toast] (primeng-angular-toast-example)
<p-tree><p-tree> TreeModule
<p-table></p-table> TableModule

THE BEST NEWSLETTER ANYWHERE
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
Subscribe
You'll get a notification every time a post gets published here.





Related posts

Angular 13 Lowercase pipe tutorial | How to Convert a string to small case example

Angular 13 Sweetalert tutorial|popup notification in Angular example

Angular 13 Titlecase pipe tutorial | How to Capitalize the first letter of each word of a string example

Angular 13 UpperCase pipe tutorial | How to Convert a String to Uppercase example

Angular LocalStorage, SessionStorage example | Ngx-webstorage tutorial

Angular primeng bar chart|p-chart bar type example

Angular Semantic UI Popup Modal | ng2-semantic-ui example