Angular 8 PrimeNG p-table pagination style

Question

I'm trying to use PrimeNG to make a paginated table but I got this basic table with almost no styling

I want it to have the same style like this one stackblitz
I think I have installed and imported all the required packages. Also, I added the required styles paths to the angular.json file.

Here is my package.json

{
  "name": "shopping-cart",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "@auth0/angular-jwt": "^4.2.0",
    "bootstrap": "^4.5.0",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "primeflex": "^3.1.2",
    "primeicons": "^5.0.0",
    "primeng": "^8.1.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.0",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "shopping-cart": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/shopping-cart",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.css",
              "./node_modules/primeicons/primeicons.css",
              "./node_modules/primeng/resources/themes/nova-light/theme.css",
              "./node_modules/primeflex/primeflex.css",
              "./node_modules/primeng/resources/primeng.min.css",
              "./src/styles.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/bootstrap/dist/js/bootstrap.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "shopping-cart:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "shopping-cart:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "shopping-cart:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.css",
              "./node_modules/primeicons/primeicons.css",
              "./node_modules/primeng/resources/themes/nova-light/theme.css",
              "./node_modules/primeflex/primeflex.css",
              "./node_modules/primeng/resources/primeng.min.css",
              "./src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "shopping-cart:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "shopping-cart:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "shopping-cart"
}

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { JwtModule } from "@auth0/angular-jwt";
import { TableModule } from "primeng/table";
import { ToastModule } from "primeng/toast";
import { CalendarModule } from "primeng/calendar";
import { SliderModule } from "primeng/slider";
import { MultiSelectModule } from "primeng/multiselect";
import { ContextMenuModule } from "primeng/contextmenu";
import { DialogModule } from "primeng/dialog";
import { ButtonModule } from "primeng/button";
import { DropdownModule } from "primeng/dropdown";
import { ProgressBarModule } from "primeng/progressbar";
import { InputTextModule } from "primeng/inputtext";
//import components and services

export function tokenGetter() {
  return sessionStorage.getItem("jwt");
}

@NgModule({
  declarations: [
    //components
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    TableModule,
    ToastModule,
    CalendarModule,
    SliderModule,
    MultiSelectModule,
    ContextMenuModule,
    DialogModule,
    ButtonModule,
    DropdownModule,
    ProgressBarModule,
    InputTextModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        whitelistedDomains: ["localhost:44346"],
        blacklistedRoutes: [],
      },
    }),
  ],
  providers: [
    //services
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

component.html

<div class="container" style="padding-left: 15px">
  <h1>{{ title }}</h1>
  <hr />

  <p>
    <a class="btn btn-primary" routerLink="/item/add">Add New Item</a>
  </p>
  <p-table
    [value]="items"
    [lazy]="true"
    (onLazyLoad)="loadItems($event)"
    [paginator]="true"
    [rows]="numberOfRows"
    [totalRecords]="totalRecords"
    [loading]="loading"
  >
    <ng-template pTemplate="header">
      <tr>
        <th>Name</th>
        <th>Price</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-item>
      <tr>
        <td>{{ item.name }}</td>
        <td>$ {{ item.price }}</td>
      </tr>
    </ng-template>
  </p-table>
</div>

component.ts

import { Component, OnInit, ViewEncapsulation } from "@angular/core";
import { Item } from "src/app/models/item";
import { LazyLoadEvent } from "primeng/api";
import { ItemService } from "src/app/services/admin/item.service";

@Component({
  selector: "app-items-list2",
  templateUrl: "./items-list2.component.html",
  styleUrls: ["./items-list2.component.css"],
  encapsulation: ViewEncapsulation.None,
})
export class ItemsList2Component implements OnInit {
  constructor(private itemService: ItemService) {}
  title: string;
  loading: boolean = true;
  totalRecords: number;
  pageNumber: number = 1;
  numberOfRows: number = 3;
  items: Item[] = [];
  ngOnInit() {
    this.title = "Manage Products";
    this.loading = true;
  }

  getItems() {
    this.itemService.getItems(this.pageNumber).subscribe((data) => {
      this.items = data["list"];
      this.totalRecords = data["totalCount"];
      this.loading = false;
    });
  }

  loadItems(event: LazyLoadEvent = null) {
    this.pageNumber = event.first / this.numberOfRows + 1;
    this.loading = true;
    this.getItems();
  }
}

What am I missing to fix this?
Thanks in advance.

Check two things. 1) In angular.json move the styles.css to the first. 2) Make sure the path to the primeng css mentioned via `node_modules` is correct. I suspect the ./ in front of it. In the example you linked note the file path given in angular.json. Validate the path w.r.t the position of angular.json — Navoneel Talukdar, Dec 22 '21 at 09:48

score 0 · Answer 1 · answered Dec 22 '21 at 10:50

0

use to in your file app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

If your problem persists, use encapsulation in your code.

If you want to change its settings in only one component, enter your encapsulation type in the .ts file of that component. Here, for example, I set my encapsulation value to none:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})

But if you want to apply the changes to the whole project, go to your main.ts file and enter your capsule as follows:

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule
  ,
  [
    {
      defaultEncapsulation: ViewEncapsulation.None
    }
  ]
).catch(err => console.error(err));

See the description and different modes of encapsulation in the link below. enter link description here

answered Dec 22 '21 at 10:50

minabagheri

541
2
9

But I have no style in `app.component.css`, same for other components and `style.css` file, they are all empty. I want to use the style of `p-table` itself that comes with the PrimeNG package. How can I use encapsulation for this case? – Merna Mustafa Dec 22 '21 at 11:10
Yes, use after encapsulation. My problem was solved with encapsulation – minabagheri Dec 22 '21 at 11:12
I set `encapsulation: ViewEncapsulation.None` but the problem is still there – Merna Mustafa Dec 22 '21 at 11:14
Both in the app.component.ts file and in the main.ts? – minabagheri Dec 22 '21 at 11:16
I will help you if you can share your code with me – minabagheri Dec 22 '21 at 11:17
I have updated my question. – Merna Mustafa Dec 22 '21 at 11:25

score 0 · Answer 2 · answered Dec 22 '21 at 11:37

Apply the following changes to the addresses of your angular.json file

                        "styles": [
                            "src/styles.scss",
                            "./node_modules/primeflex/primeflex.css",
                            "./node_modules/igniteui-angular/styles/igniteui-angular.css",
                            "./node_modules/primeng/resources/themes/saga-orange/theme.css",
                            "./node_modules/primeng/resources/primeng.min.css",
                            "./node_modules/primeicons/primeicons.css"
                        ],

unfortunately, this also doesn't work. – Merna Mustafa Dec 22 '21 at 12:06 — Merna Mustafa, Dec 22 '21 at 12:06

score 0 · Answer 3 · answered Dec 22 '21 at 12:23

0

See my changes to your code works for me

answered Dec 22 '21 at 12:23

minabagheri

541
2
9

Could it be a version problem? I use Angular 8 but you and the example I linked are using Angular 12. – Merna Mustafa Dec 22 '21 at 12:33
I have no such theme called `saga-blue` in my version, but I really don't think this is the cause of the problem. – Merna Mustafa Dec 22 '21 at 12:36
yes You have to change the version of one of these two, preferably to update your Angular – minabagheri Dec 22 '21 at 12:37
The difference between your theme and mine does not matter How the theme is addressed is important – minabagheri Dec 22 '21 at 12:39
Okay, I will try to update my Angular version. – Merna Mustafa Dec 22 '21 at 12:41

Angular 8 PrimeNG p-table pagination style

3 Answers3