This post is an solution for different below issues for **Primeng css styles in Angular **
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.
It is very difficult to solve if primeng styles are missing in Angular application.
It provides reusable components like button, upload,input control widgets.
Each component style is linked with three things.
In Angular application, Primeng and icons are installed with npm command as seen below
npm install primeng --save
npm install primeicons --save
This installs both dependencies to node_modules project,
You can check primeng css styles as seen below
By default, These framework provides various themes like nova-blue, bootstrap, luna-blue etc. You can check more themes below.
Global css styles
It provides primeng.min.css global css styles required for every component of primeng.
Like fontawesome icon kit, It provides inbuilt icons in primeicons.css file
So you have to include themes,global and icon styles in Angular application.
There are multiple ways can be load styles in Angular typescript application.
Below are three different methods we can do.
Please add css files location in styles section of Angular.json
In Angular.json file, styles attribute path is “architect” - “test” - “styles”, However there is one more style section in the same file ie which is not the correct path So, these files are not added to “architect” - “build” - “styles”.
using link styles Second way is to add in index.html using link like a normal applicaiton.
<link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/themes/nove-light/theme.css">
<link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/primeng.min.css">
<link rel="stylesheet" type="text/css" href="node_modules/primeicons/primeicons.css">
In Angular Applications,
You have to use css @import to include any external css styles.
If you want css styles to be applied globally, add it in styles.css Other way, you can add in Angular component to load and apply to each component.
It is very difficult to solve an css issues in Angular application for basic users. This blog talks about primeng css styl files, issues and solutions.
Multiple ways css can be integrated into application and choose the best approach suitable for your needs.
Please like and share in Facebook,twitter,Linkedin.