primeng | The Most Complete Angular UI Component Library | Chart library

 by   primefaces CSS Version: 16.0.0-rc.2 License: Non-SPDX

kandi X-RAY | primeng Summary

kandi X-RAY | primeng Summary

primeng is a CSS library typically used in User Interface, Chart, Angular, Bootstrap, jQuery applications. primeng has no bugs, it has no vulnerabilities and it has medium support. However primeng has a Non-SPDX License. You can download it from GitHub.

The Most Complete Angular UI Component Library

            kandi-support Support

              primeng has a medium active ecosystem.
              It has 8203 star(s) with 4179 fork(s). There are 305 watchers for this library.
              There were 10 major release(s) in the last 6 months.
              There are 596 open issues and 10153 have been closed. On average issues are closed in 235 days. There are 91 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of primeng is 16.0.0-rc.2

            kandi-Quality Quality

              primeng has 0 bugs and 0 code smells.

            kandi-Security Security

              primeng has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              primeng code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              primeng has a Non-SPDX License.
              Non-SPDX licenses can be open source with a non SPDX compliant license, or non open source licenses, and you need to review them closely before use.

            kandi-Reuse Reuse

              primeng releases are available to install and integrate.
              It has 330938 lines of code, 0 functions and 1133 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here
            Get all kandi verified functions for this library.

            primeng Key Features

            The Most Complete Angular UI Component Library

            primeng Examples and Code Snippets

            Is PrimeNG's p-pickList changing source and target?
            JavaScriptdot img1Lines of Code : 19dot img1License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            private _sourceOptions: string[];
            @Input set sourceOptions(options: string[]) {
                // Ensure we're not passing a reference to the array down because it may still
                // be changed. Create a new array with the same items. This can also hel
            PrimeNG tree component
            JavaScriptdot img2Lines of Code : 26dot img2License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            // It's better to keep using Observable instead of Promise as it is more flexible and powerful
            // and shareReplay() avoid requesting your server again if subscribed multiple times
            postProfiles(): Observable {
                const url = 'profiles/crea
            Angular 8: Problems with QueryParamsHandling
            Lines of Code : 3dot img3License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            npm uninstall primeng
            npm install primeng@8.0.1
            Primeng with jhipster
            Lines of Code : 28dot img4License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            npm i primeng@8.1.1 primeicons @angular/animations
            yarn add primeng@8.1.1 primeicons @angular/animations
            import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
            flex grid not working for p-col-# primeng Angular 5
            Lines of Code : 12dot img5License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            npm install primeng --save
            npm install primeflex --save
            How to make menu and submenus recursively in JavaScript?
            JavaScriptdot img6Lines of Code : 91dot img6License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
                    "TITLE": "parent1",
                    "SUBMENU": [
                        "SUBMENU": [
                            "SUBMENU": [
                                "TITLE": "Child 1"
            Error when trying to use p-Dropdown from PrimeNG in application
            Lines of Code : 16dot img7License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
                npm install primeng --save   //install prime in your machine
                npm install primeicons --save    //install prime icon in your machine
            Steps to integrate PrimeNG with JHipster
            Lines of Code : 11dot img8License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            yarn add primeng
            yarn add @angular/animations
            ng g component new-cmp
            import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
            import {AccordionModule, RatingModule, Cal
            PrimeNg is not working with .scss file
            Lines of Code : 10dot img9License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
             - ng new project --style=scss
             - npm install primeng –-save
             - npm install font-awesome --save
             -  @import 
                "../node_modules/font-awesome/css/font-awesome.min.css", //is used by the st
            How to avoid ExpressionChangedAfterItHasBeenCheckedError when toggle
            Lines of Code : 17dot img10License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            // Patches for PrimeNG focus bugs.
            import { Dropdown, RadioButton } from 'primeng/primeng';
            const originalDropdownOnInputFocus = Dropdown.prototype.onInputFocus;
            Dropdown.prototype.onInputFocus = function(event: any): void {

            Community Discussions


            PrimeNG Steps component is not working in Angular 13 project
            Asked 2022-Mar-17 at 05:09

            I have created a project in the Angular 13 version. I have installed PrimeNG controls (13.3.0 version) . Now I want to use the Steps control but it's not working. In my Account Module I have created a folder and inside the folder, I have the below components:

            1. signup
            2. organization
            3. user

            Now I have added the PrimeNG Steps control in the signup component to load the organization and user component inside it. Here is the signup component's code:




            Answered 2022-Mar-17 at 05:09

            Here is my answer. I forgot to add the router directive just after the steps component. Here is the final code of signup HTML:



            How to retrigger filters on data update in PrimeNG tables?
            Asked 2022-Mar-14 at 20:08

            If I add some rows to the table, the table view gets dynamically updated, but the filters I apply reflect only initial data.

            For eg, if I apply the filter "startsWith" on a header called "Title" with a filter value of "zaalim", then if the initial dataset didn't have any row with title starting with "zaalim", then the view will keep showing empty even after I add such rows after every 10 seconds. If you remove the filter, you can see the new rows with Title starting with "zaalim" being gradually added.

            I want the filtered view to reflect the change in dataset. (Even the pagination doesn't get automatically refreshed). Maybe I can re-trigger existing filters after adding each new row? How to do that?

            Here is the stackblitz



            Answered 2022-Mar-14 at 17:43

            It is a hacky solution, but you can add a ViewChild for the table to your component:



            throwError(error) is now deprecated, but there is no new Error(HttpErrorResponse)
            Asked 2022-Mar-01 at 00:42

            Apparently throwError(error) is now deprecated. The IntelliSense of VS Code suggests throwError(() => new Error('error'). new Error(...) accepts only strings. What's the correct way to replace it without breaking my HttpErrorHandlerService ?

            http-error.interceptor.ts ...


            Answered 2021-Aug-04 at 19:08


            How do I change the status of the inputswitch in the form, depending upon the data from backend?
            Asked 2022-Feb-22 at 07:51

            Hi I am new to angular and I am using primeNg components in which I have a form and in my form I have a tag and I have my JSON data coming from the backend and each record has


            "status": "ACTIVE"


            either the status is active or inactive. I want this inputSwitch to be in ON position if the status is Active else keep it in Off Position. This is what my input switch looks like

            Also to mention - I have many no: of records which have status active or inactive.

            This is my input formcontrolName



            Answered 2022-Feb-22 at 07:51

            When you init the form via reactive forms (guess so since you are using formControlName).




            PrimeNG - column filtering and languages with tones/accents
            Asked 2022-Feb-15 at 19:51

            I want to perform filtering into columns of a table that contains data in Greek language.

            Unfortunately the component internally does not seem to recognize the characters with tones to be the same with the same character without a tone. For example a vowel with a tone (ή) is not matched with the same vowel witout tone (η).

            Example with pictures below:

            1) Filtering using the tone ή

            2) Filtering without using the tone η (which does not match with ή)

            In most filters out there on the web, characters with tone are matched with the same characters without tone and vice versa, how can I achieve the same here? Maybe if I could use the localeCompare function as filter function as an attribute in the columnFilter, but the documentation is not detailed in the table filtering section

            I posted the same question in their github repository but I have not received any answer yet.



            Answered 2022-Feb-15 at 19:51

            After reading their documentation, it looks like they don't expose their p-columnFilter component, nor is there an eventEmitter to get value changes on the input fields.

            The fastest way to resolve your issue would be using their filter service and writing a custom filtering like this. (I used locale-contains library for this one):



            Filter PrimeNG Table on Init using .ts code
            Asked 2022-Feb-10 at 08:28

            I need to filter the table on view load.

            For example, I have a table with 5 columns (Woid, Customer, AdapterID, Assignee, Status). On load, I want to filter woid column using 'contains'. I accomplished filtering onLoad but when I want to filter again that column later I got an error:

            [i]'Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.'[/i]

            Program code below...



            Answered 2021-Oct-10 at 10:36

            I replaced this line of code:



            What is the correct way to use Tab View scrollable property?
            Asked 2022-Feb-10 at 07:49

            I am using p-tabview and I want to implement scrollable property as stated in primeng site:

            But I am getting an error stating Can't bind to 'scrollable' since it isn't a known property of 'p-tabView'. Am I missing anything?

            StackBlitz demo:

            Reference code:



            Answered 2021-Nov-26 at 06:18

            This issue was fixed lately at

            So you need to use primeng version 12.1.1 or above



            Angular converting project to PWA, Dependencies error?
            Asked 2022-Feb-09 at 10:42

            I am getting issues dynamically loading components using the following syntax:



            Answered 2022-Feb-07 at 11:32

            You have a dependency conflict.

            @angular/pwa internally adds @angular/service-worker package for you.

            The error message says that you are installing @angular/service-worker version '12.2.16' which internally depends on @angular/core version '12.2.16'.

            Your package.json has @angular/core version '12.1.3'.

            So, you need to install the @angular/pwa not with @latest but with the version that's compatible with your current setup.

            Install it with ng add @angular/pwa@12.1.3



            Display different backgrounds for alternating rows of expanding table
            Asked 2022-Feb-03 at 20:11

            I am using primeNg row expansion feature. Code is here :

            I have a requirement to display yellow background for odd rows and grey background for even rows, but the additional inserted row having the child table should not be included during calculation.

            Consider the below html example, where user has expanded the first row. I do not want the rows with 'table-row-expand' class to be considered in the even/odd rule. Here I want first row to have yellow color, second row to have grey color and third row to have yellow again. The expanded row should not have any background.

            Note that the .table-row-expand row gets added to the DOM only when user expands the corresponding row. Kindly help me with this problem.



            Answered 2022-Feb-03 at 20:11

            Save yourself a headache and drop in a wee bit 'o JavaScript. You may need to put this code in a function to be called when new rows are added.



            How to make picklist editable in the target component in angular?
            Asked 2021-Dec-27 at 14:24

            I am using p-picklist and I want to edit target list span data used for displaying the value.

            I am using the source code:

            How can I make product name editable in the target list.



            Answered 2021-Dec-27 at 14:18

            Turning the

            {{}} into an input with [(ngModel)]="" seem to work.

            In order to check if the templated item is listed under target and not under source, you can check the element's position on the DOM; if it is inside .p-picklist-target, show the input, else show h5.



            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install primeng

            You can download it from GitHub.


            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i primeng

          • CLONE
          • HTTPS


          • CLI

            gh repo clone primefaces/primeng

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link