prime ng styles not applying angular2

Question

Hi I just started working with angular 2. I found this library PrimeNG, I followed this tutorial: http://blog.davincisoftware.sk/primeng-web-component-framework-based-on-ang

Answer 1

I wouldn't turn off ViewEncapsulation as your styles could bleed out and potentially cause issues in the rest of your application.

I'd recommend using the /deep/ selector to force a style down through the child component tree. This can be applied on a Class by Class basis or to multiple Classes, as below.

A single Class

:host #{"/deep/"} .yourStyle1 {
    color: #ffffff; 
}

Multiple Classes

:host #{"/deep/"} {

     .yourStyle1 { color: #ffffff; }

     .yourStyle2 { color: #000000; }
}

More Info: https://angular.io/docs/ts/latest/guide/component-styles.html

Answer 2

your syntax is wrong.

In place of

<button type="button" pButton icon="fa-plus" style="float:left" (click)="showDialogToAdd()" label="Add"></button>

see the change in style syntax

you should use

<button type="button" pButton icon="fa-plus" [style]="{'float':'left'}" (click)="showDialogToAdd()" label="Add"></button>

Answer 3

The best solution for me was to add the styles to the angular.json file. Dont forget to stop your project and ng serve again after the changes:

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

                    ],

Answer 4

Add the necessary CSS files to the styles section of your .angular-cli.json:

"styles": [
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/primeng/resources/primeng.min.css",
    "../node_modules/primeng/resources/themes/omega/theme.css"
    //...
],

See also PrimeNg Setup, section "Styles Configuration".

Answer 5

Have you included primeNG css and one of the theme in your index.html?

<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />

See if this helps.

Answer 6

Open your style.css file and import the styles.

@import '../node_modules/primeng/resources/themes/omega/theme.css';
@import '../node_modules/primeng/resources/primeng.min.css';