CODEWITHSUNDEEP
htmlangularprimeng
Miguel Rosales
Miguel Rosales

Reputation: 799

prime ng styles not applying angular2

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: primeNG datatable

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

  }

Upvotes: 13

Views: 67947

Answers (7)

Pablo Varela
Pablo Varela

Reputation: 648

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"

                    ],

Upvotes: 1

Markus Pscheidt
Markus Pscheidt

Reputation: 7331

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".

Upvotes: 4

danmc
danmc

Reputation: 1201

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

Upvotes: 7

gtzinos
gtzinos

Reputation: 1197

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

Upvotes: 24

md asif husain Jeelani
md asif husain Jeelani

Reputation: 3

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>

Upvotes: -4

Sanket
Sanket

Reputation: 20017

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.

Upvotes: 7

Keifer Caebe
Keifer Caebe

Reputation: 617

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

Upvotes: 28

Related Questions