prime ng styles not applying angular2

You need to turn off encapsulation for the component.

The basic concept is that each component hides it's styles from other component so they don't overwrite each other. You can read more about encapsulation here.

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

@Component {
    ...
    encapsulation: ViewEncapsulation.None,
} ...

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.


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


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