Primeng angular 7 - css is not getting applied

user_1658941 0
Viewed 3492

I am using angular 7 and primeng library for UI compnents. CSS is not getting applied to the HTML elements. I have imported these css files in angular.json:

           "styles": [
              "node_modules/font-awesome/css/font-awesome.min.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/nova-light/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "src/styles.scss"
            ]

On the demo page: http://primefaces.org/primeng/#/inputgroup

Input box have these classes generated: ui-inputtext ui-corner-all ui-state-default ui-widget

These are missing from my generated html, if i apply these classes manually css gets applied. This is HTML code:

<h3 class="first">Addons</h3>
<div class="ui-g ui-fluid">
    <div class="ui-g-12 ui-md-4">
        <div class="ui-inputgroup">
            <span class="ui-inputgroup-addon"><i class="pi pi-user" style="line-height: 1.25;"></i></span>
            <input type="text" pInputText placeholder="Username">         
        </div>
    </div>

    <div class="ui-g-12 ui-md-4">
        <div class="ui-inputgroup">
            <span class="ui-inputgroup-addon">$</span>
            <input type="text" pInputText placeholder="Price">   
            <span class="ui-inputgroup-addon">.00</span>      
        </div>
    </div>

    <div class="ui-g-12 ui-md-4">
        <div class="ui-inputgroup">
            <span class="ui-inputgroup-addon">www</span>
            <input type="text" pInputText placeholder="Website">      
        </div>
    </div>
</div>

I have tried ViewEncapsulation:

import { ViewEncapsulation } from '@angular/core';

@Component({
  ..
  encapsulation: ViewEncapsulation.None
})

There is no change in app.module.ts for primeng.

primeng angular input css
3 Answers

As Per My Example You need to change in app.module.ts file

See below Images

You need to import InputTextModule from primeng in root module of your component

And here is the angular.json file

user_87713590

if you find this helpfull...

I had the same problem, then I tried to put the css files into my styles.css instead of angular.json and it works fine now

change this...(angular.json)

"styles": [
          "src/styles.scss",
          "node_modules/primeicons/primeicons.css",
          "node_modules/primeng/resources/themes/saga-blue/theme.css",
          "node_modules/primeng/resources/primeng.min.css"
        ],

by this...(src/styles.scss):

@import '~primeng/resources/primeng.min.css';
@import '~primeng/resources/themes/bootstrap4-light-blue/theme.css';
@import '~primeicons/primeicons.css';
user_113895170

When you install primeng-lts

Add to below styles to angular.json

  "styles": [
          "./node_modules/primeng-lts/resources/themes/nova-light/theme.css",
          "./node_modules/primeng-lts/resources/primeng.min.css",
          "node_modules/primeicons/primeicons.css"
        ],
user_75969960
Related