Learn free primeng tutorials

Angular primeng bar chart|p-chart bar type example

January 9, 2023 ·  6 min read

In this blog post, You’ll learn primeng Bar chart tutorials with examples. Contents Primeng Bar p-chart component add ChartModule into the angular application Basic Bar chart component Change the width and height of the bar chart Customize bar elements Show or hide Legends with custom font size and color Hide x-axis, y-axis labels Can’t bind to ‘data’ since it isn’t a known property of the ‘p-chart’ error A bar chart is one type of chart displayed in the browser....

Angular upload file with primeng | p-fileUpload example

January 9, 2023 ·  5 min read

primeng is a Rich UI component library for the angular framework, It provides a lot of reusable components like buttons, input controls, data tables, and File upload. This blog explains the integration of Primeng in the latest Angular versions and uploads buttons with examples. It also explains how to hide/showprimeng` upload buttons. Create a new application First, Let’s create a new application angular-upload using the angular cli tool, ie ng command....

Complete Angular UI library |Primeng Components

January 9, 2023 ·  3 min read

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....

Fix for primeng styles are not working in Angular

January 9, 2023 ·  3 min read

This post is a solution for the different below issues for Primeng CSS styles in Angular. Themes are not loaded correctly Primeng components styles are not applied correctly Angular upgrades from one version to other broken CSS styles Primeng version latest integration This post is my findings on the integration of primeng components in Angular applications. These solutions will work on Angular 2+ versions including Angular 10 and 11 versions....

Learn Primeng Angular ListBox |p-listbox examples

January 9, 2023 ·  4 min read

ListBox is a graphical user component that displays a list of elements from which the user can select multiple elements at once. The ListBox can also show optional checkboxes Create an Angular application from Scratch First, create an angular application from scratch using the angular cli command. And integrate primeng libraries into the Angular application if you are not sure how to do it, You can check the below things....

Prime Icons list | primeng primeReact, PrimeVue icons list

January 9, 2023 ·  7 min read

Contents primeicons tutorials font style -size and color animations Install primeng icons using npm Configure prime-related CSS Import css in style.class configure CSS files in angular.json link css in index.html pi-icons categories list pi-icon category list file pi-icon List Category-audio video primeng icons not showing in angular applications How to add a prime icon to a button primeicons tutorials pi pi-icon attribute is used to display primeicons on web applications....

Primeng Angular Accordion tutorial |p-accordion examples

January 9, 2023 ·  4 min read

In this tutorial, We are going to learn Primeng Angular accordion basics with examples. What is Angular Accordion? Accordion is a UI element that shows/hides the content section on the page on the user’s click for a group of items. Primeng provides an Angular accordion component. Usually, the accordion is used to show the long summary content where it will not fit into the page and divide and group content under the tabs of an Accordion....

Primeng Angular Tutorial with Example

January 9, 2023 ·  5 min read

In my previous article, we covered the basics of primeng UI library In this article, we are going to learn how to set up an angular project with primeng using angular CLI. Importantly, This tutorial works on all the latest Angular versions including 10,11,12 Learn Angular with primeng components Angular Cli is a tool to generate an angular project from scratch. It is a code generator for the folder structure of the angular project....

Primeng Autocomplete Angular tutorial with examples

January 9, 2023 ·  4 min read

In this blog post, We are going to learn the Implement Autocomplete feature of Primeng in Angular with an example. Primeng Angular Autocomplete Component Autocomplete is a User interface feature it contains an Input text box and allows the developer to type text, and the application search and display the matched word results for typed characters and give a complete word prediction list. This is helpful for the user to search and select instead of typing in the text box....

Primeng button Angular tutorials|p-button examples

January 9, 2023 ·  3 min read

This post covers an How to add primeng button to Angular component with examples. First, see this tutorial on how to Integrate primeng into Angular for doing the below things. create an angular application using the ng CLI command Integrate primeng into the Angular application Import ButtonModule into the Angular application In the Application Module file ie app.module.ts import ButtonModule from the primeng library Added ButtonModule to import section of app module....

Primeng calendar Angular tutorial with examples

January 9, 2023 ·  2 min read

Primeng Calendar In this tutorial, We are going to learn the Basics of the Priming calendar with examples. Primeng is a group of Rich UI elements for the Angular 12 library. The calendar is a component for selecting a date by the user. Calendar features Supports Multi-languages Two Way binding Able to customize as per user requirements Allows selecting time and date Creation of Angular 12 Application using CLI tool First, install the angular-cli tool using an npm package manager....

Primeng data table Filtering Sorting Paging | Angular p-table examples

January 9, 2023 ·  7 min read

In this blog post, We are going to learn the Primeng Angular 12 Data table example with tutorials. Contents Primeng data table in Angular Primeng data table features Generate Angular Application with CLI Angular CLI Project Structure Integrate primeng npm in Angular angular.json style configurations Primeng Data Table Simple Example Template html changes primeng dynamic columns with ngFor loop primeng datatable Sort column ascending primeng table Pagination example p-table issues and errors Module not found: Error: Can’t resolve ‘@angular/cdk/scrolling Primeng is an Angular open-source framework for a collection of Rich UI libraries....

Primeng Progressbar tutorial| p-progress bar example

January 9, 2023 ·  4 min read

In this blog post, We are going to learn Primeng Angular Progressbar tutorials with examples. Primeng is a Rich UI library for providing rich UI components of an Angular framework. It Provides a progress bar UI Component. Angular Primeng Progressbar Component example progressbar is a UI component used to indicate the progressive state of an event or action. This will be shown to the user about the status during the upload of a file to a server....

Primeng Dropdown Component | Angular Dropdown list Example

January 5, 2022 ·  7 min read

In this tutorial, learn the basics of Primeng Dropdown with examples. The ‘dropdown’ is a user interface element that displays an elements list and allows the user to select one of the elements from the list. The element can be plain strings, JSON arrays, or javascript Objects. Primeng has a set of rich UI Elements for Agular Framework on typescript from the Primefaces team. Contents primeng Angular dropdown features Integration primeng dropdown into the existing angular application Primeng Angular dropdown example Primeng Dropdown OptionLabel example Primeng Modal Driven Form Example Primeng ng-template custom label and content Primeng Dropdown style and Icon Change Primeng Important Events and properties How to Fix for CUSTOM_ELEMENTS_SCHEMA Angular Error Conclusion You can check my previous posts on the primeng framework....