CODEWITHSUNDEEP
cssangularinputprimeng
Naveen
Naveen

Reputation: 791

Primeng angular 7 - css is not getting applied

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.

Upvotes: 5

Views: 7017

Answers (3)

Chamin Thilakarathne
Chamin Thilakarathne

Reputation: 447

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"
        ],

Upvotes: 0

Djamel eddine CHAHRAT
Djamel eddine CHAHRAT

Reputation: 145

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';

Upvotes: 3

kushal shah
kushal shah

Reputation: 863

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

Upvotes: 8

Related Questions