primeng

What is primeng?

PrimeNG is a comprehensive UI component library for Angular applications. It offers a wide range of components that are designed to be highly customizable and easy to integrate into Angular projects. PrimeNG covers various UI needs, from basic elements like buttons and forms to complex data tables and charts.

What are primeng's main functionalities?

DataTable

The DataTable component is used to display and manipulate tabular data. It supports features like sorting, pagination, and filtering.

{
  "template": "<p-table [value]='cars'> <ng-template pTemplate='header'> <tr> <th>Vin</th> <th>Year</th> <th>Brand</th> <th>Color</th> </tr> </ng-template> <ng-template pTemplate='body' let-car> <tr> <td>{{car.vin}}</td> <td>{{car.year}}</td> <td>{{car.brand}}</td> <td>{{car.color}}</td> </tr> </ng-template> </p-table>",
  "component": "import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { cars = [ { vin: 'a1653d4d', year: 1998, brand: 'VW', color: 'White' }, { vin: 'ddeb9b10', year: 1985, brand: 'Mercedes', color: 'Green' }, { vin: 'd8ebe413', year: 1995, brand: 'Jaguar', color: 'Silver' } ]; }"
}

Chart

The Chart component allows you to create various types of charts, such as pie, bar, and line charts, using the Chart.js library.

{
  "template": "<p-chart type='pie' [data]='data'></p-chart>",
  "component": "import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { data = { labels: ['A', 'B', 'C'], datasets: [ { data: [300, 50, 100], backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'] } ] }; }"
}

Dialog

The Dialog component is used to display modal dialogs. It supports features like custom headers, footers, and various animations.

{
  "template": "<p-dialog header='Title' [(visible)]='display'> <p>Content goes here...</p> </p-dialog> <button type='button' (click)='showDialog()'>Show</button>",
  "component": "import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { display: boolean = false; showDialog() { this.display = true; } }"
}

Other packages similar to primeng

ng-zorro-antd

NG-ZORRO is an Ant Design component library for Angular. It provides a wide range of high-quality components that are designed to be used in enterprise-level applications. Compared to PrimeNG, NG-ZORRO focuses more on providing a consistent design language and is based on the Ant Design system.

angular-material

Angular Material is the official Material Design component library for Angular. It offers a set of reusable UI components based on Google's Material Design guidelines. While PrimeNG provides a broader range of components, Angular Material focuses on delivering a consistent and modern look and feel.

clarity-angular

Clarity is a design system by VMware that includes a component library for Angular. It provides a set of well-designed, accessible, and customizable components. Clarity focuses on usability and accessibility, making it a good choice for enterprise applications. Compared to PrimeNG, Clarity has a more opinionated design system.

README

PrimeNG

UI Components for Angular

See PrimeNG homepage for live showcase and documentation.

PrimeNG is a collection of rich UI components for Angular. All widgets are open source and free to use under MIT License. PrimeNG is developed by PrimeTek Informatics, a vendor with years of expertise in developing open source UI solutions. For project news and updates, please follow us on twitter and visit our blog.

• 70+ Components: The most complete set of native widgets featuring 70+ easy to use components for all your UI requirements.

• Open Source: Hosted at GitHub, all widgets are open source and free to use under MIT license. Feel the power of open source.

• Productivity: Allocate your valuable time on business logic rather than dealing with the complex user interface requirements.

• Themes: Don’t get tied up in just one look&feel. Choose from a variety of options including material and flat design.

• Templates: Professionally designed highly customizable native Angular CLI application templates to get started in no time.

• Mobile: Enhanced mobile user experience with touch optimized responsive design elements.

---

Download

PrimeNG is available at NPM, if you have an existing application run the following command to download it to your project.

npm install primeng --save

Angular CLI Integration

Add PrimeNG and FontAwesome as a dependencies.

"dependencies": {
  //...
  "primeng": "^5.2.0-rc.1",
  "font-awesome": "^4.7.0"
},

Configure required styles at the styles section, example below uses the Omega theme.

"styles": [
  "../node_modules/font-awesome/css/font-awesome.min.css",
  "../node_modules/primeng/resources/themes/omega/theme.css",
  "../node_modules/primeng/resources/primeng.min.css",
  //...
],

That is all, you may now import PrimeNG components, for a working example visit the PrimeNG CLI QuickStart sample at GitHub.