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-angularjs-2 It it all works, except the styles. They're not applying somehow and I really don't know what to do. here's what my table looks like:

<div class="content-wrapper fullscreen-override">
<section class="content-header">
<H1>Users</H1>
</section>

<section class="content">
<div class="row col-lg-10 center">
<div class="box box-primary"> 
<p-dataTable [(value)]="users" selectionMode="single" [(selection)]="selectedUser" (onRowSelect)="onRowSelect($event)" rows="5" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" [globalFilter]="gb" [responsive]="true">

    <p-column field="email" header="email" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
    <p-column field="first_name" header="first_name" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
    <p-column field="last_name" header="last_name" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
    <p-column field="is_superuser" header="is_superuser" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>

    <footer>
        <div class="ui-helper-clearfix" style="width:100%">
            <button type="button" pButton icon="fa-plus" style="float:left" (click)="showDialogToAdd()" label="Add"></button>
            <button type="button" pButton icon="fa-pencil-square-o" style="float:left" (click)="showDialogToEdit()" [disabled]="selectedUser == null" label="Edit"></button>
            <button type="button" pButton icon="fa-close" style="float:left" (click)="delete()" [disabled]="selectedUser == null" label="Delete"></button>
        </div>
    </footer>
</p-dataTable>

<p-dialog header="User details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true">
    <div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="displayableUser">
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="email">email</label></div>
            <div class="ui-grid-col-8"><input pInputText id="email" [(ngModel)]="displayableUser.email" /></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="name">first_name</label></div>
            <div class="ui-grid-col-8"><input pInputText id="first_name" [(ngModel)]="displayableUser.first_name" /></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="surname">last_name</label></div>
            <div class="ui-grid-col-8"><input pInputText id="last_name" [(ngModel)]="displayableUser.last_name" /></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="country">is_superuser</label></div>
            <div class="ui-grid-col-8"><input pInputText id="is_superuser" [(ngModel)]="displayableUser.is_superuser" /></div>
        </div>
    </div>
    <footer>
        <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
            <button type="button" pButton icon="fa-check" (click)="save()" label="Save"></button>
        </div>
    </footer>
</p-dialog>
</div>
</div>
</section>
</div>

Above is my template.

Also, I don't quite understand how to apply my own classes on their elements.

This is my component class( I ve also tried removing the styles attribute in the decorator Component

import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { UsersFormCreation } from './modal_forms/creation/users.forms.creation';
import {DataTable,
        Column,
        TabPanel,
        TabView,
        Header,
        Footer,
        Dialog,
        Button,
        InputText} from 'primeng/primeng';
import { RequestService } from '../../common/request.service';
import {User} from './user';

const template = require('./users.template.html');
const style = require('./style.css');

@Component({
  selector: 'dashboardUsers',
  template: template,
  providers: [RequestService],
  directives: [
        ROUTER_DIRECTIVES,
        DataTable,
        Column,
        TabPanel,
        TabView,
        Header,
        Footer,
        Dialog,
        Button,
        InputText]
  styles: [style]
})
export class DashboardUsersComponent implements OnInit {
  response: string;
  api_path: string;
  users: User[];
  cols: any;
  displayableUser: User = new DisplayableUser();
  selectedUser: User;
  displayDialog: boolean;
  newUser: boolean;
  count: number;
  next: string;
  previous: string;

  constructor(public router: Router, public requestService: RequestService) {
    this.api_path = 'http://127.0.0.1:8000/users/';

  }

Answer 1

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,
} ...