Learn free primeng tutorials


Primeng Dropdown Component | Angular Dropdown list Example

May 10, 2020 ·  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 OptionLabel example  Modal Driven Form Example ng-template custom label and content  Dropdown style and Icon Change Important Events and properties primeng icons are not working or showing You can check my previous posts on primeng framework....


Primeng datatable tutorial | Angular p-table complete example

May 8, 2020 ·  6 min read

In this blog post, We are going learn the Primeng Angular Datatable example with tutorials. Contents Primeng table Tutorial Features Generate Angular Application with CLI Angular CLI Project Structure Integrate primeng npm in Angular  angular.json style configurations  Data Table Example  Template html changes Adding dynamic columns Sort column ascending Pagination example  Primeng table Tutorial Primeng Angular Tutorials with examples Primeng is an Angular open-source framework for a collection of Rich UI libraries....


Prime Icons list | primeng primeReact,PrimeVue icons list

May 7, 2020 ·  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 icons list npm primeicons tutorials pi pi-icon attribute used to display primeicons on the web applications....


Angular primeng bar chart tutorial | p-chart bar type example

May 4, 2020 ·  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...


Primeng - Angular Accordion tutorials with examples

September 24, 2018 ·  4 min read

In this tutorial, We are going to learn Primeng Angular accordion basics with examples. Angular Accordion Introduction It 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 -Learn Angular Progressbar Example

September 20, 2018 ·  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. For example, This will be shown to the user about status during the upload of a file to a server....


Primeng Autocomplete Angular tutorial with examples

September 19, 2018 ·  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 display the matched words results for typed characters and give complete word prediction list. It is an easy way to select the text from the user text box....


Primeng calendar Angular 6 tutorial with examples

August 26, 2018 ·  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 6 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 6 Application using CLI tool First, install angular-cli tool using npm package manager....


Primeng with Angular example from scratch with tutorials | Primeng Angular Tutorial Example

July 30, 2018 ·  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. Learn Angular4/5/6 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. The advantages with cli, saves a lot of time instead of writing code from scratch and error-prone as it generates configuration required files...


Learn Primeng Angular UI Library with examples

July 29, 2018 ·  3 min read

Primeng Introduction. It is a popular UI library for Angular 2 This is developed by Primefaces team from a company called Primetek. Primetek company has developed rich UI libraries like primefaces - JSF UI library java language and PrimeUI - HTML5 JQuery UI framework. Primeng UI library is based on typescript language and Angular framework. It is open source under Apache license. Angular is a popular MVC framework from Google for Developing software applications....