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.

Answer 1

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.

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

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

Answer 2

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" ],

Answer 3

See my changes to your code works for me