Learn free primeng tutorials


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

July 27, 2021 ·  7 min read

In this blog post, We are going learn the Primeng Angular 12 Data table example with tutorials. Contents Primeng data table 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 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 calendar Angular 6 tutorial with examples

June 26, 2021 ·  2 min read

Primeng Calendar In this tutorial, We are going to learn the Basics of Priming calendar with examples. Primeng is a group of Rich UI elements for 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 to select time and date Creation of Angular 12 Application using CLI tool First, install angular-cli tool using npm package manager....


Prime Icons list | primeng primeReact,PrimeVue icons list

June 14, 2021 ·  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 used to display primeicons on the web applications....


Angular primeng bar chart|p-chart bar type example

June 14, 2021 ·  5 min read

In this blog post, You’ll learn primeng Bar chart tutorials with examples. Contents p-chart bar component add ChartModule into angular application Basic Bar chart component Change 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 ‘p-chart’ error A bar chart is one type of chart displayed in the browser, It is used to display a group of data in rectangular bars...


Learn Primeng Angular ListBox |p-listbox examples

June 14, 2021 ·  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 angular cli command. And integrate primeng libraries to Angular application if you are not sure how to do it, You can check below things. Primeng Angular components How to add primeng to Angular application Once primeng is installed into application, and application is ready to run....


Primeng Dropdown Component | Angular Dropdown list Example

June 14, 2021 ·  7 min read

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


Primeng Progressbar tutorial| p-progressbar example

June 14, 2021 ·  3 min read

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


Primeng Autocomplete Angular tutorial with examples

June 13, 2021 ·  4 min read

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


Complete Angular UI library |Primeng Components

June 12, 2021 ·  3 min read

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 a different language. Primefaces is a java library for JSF UI reusable components. PrimeUI HTML5 JQuery UI framework Primeng UI library is based on typescript language for Angular framework. PrimeReact is an Complete UI component library for ReactJs. PrimeVue is an UI component toolkit for Vuejs....


Primeng Angular Accordion tutorial |p-accordion examples

June 12, 2021 ·  4 min read

In this tutorial, We are going to learn Primeng Angular accordion basics with examples. Angular Accordion Introduction Accordion is UI element that shows/hide the content section on the page on user click for a group of items. Primeng also provide 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 button Angular tutorials|p-button examples

June 4, 2021 ·  3 min read

This post covers an integrating primeng button with examples. First see this tutorial how to (Integrate primeng into Angular)[2018/07/primeng-with-angular-6-example-from.html] for doing below things. create a angular application using ng cli command Integrate primeng into Angular application Import ButtonModule into Angular application In Application Module file ie app.module.ts import ButtonModule from primeng library Added ButtonModule to import section of app module. app.module.ts: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from '....


Angular upload file with primeng | p-fileUpload example

February 20, 2021 ·  5 min read

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


Fix for primeng styles are not working in Angular

February 19, 2021 ·  3 min read

This post is an solution for 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 an my findings on integration of primeng components in Angular application. These solutions will work on Angular 2+ versions include Angular 10 and 11 versions....


Primeng Angular Tutorial with Example

January 20, 2021 ·  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 latest Angular versions include 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....


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