Regarding PrimeNg table in Angular 8

Question

I tried to used p-table(PrimeNg table) in my Angular application,I imported all the neccessary dependencies and imports in the module file from the CLI,The error is,

ERROR in The target entry-point "primeng/table" has missing dependencies: - @angular/cdk/scrolling

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AccordionModule } from 'primeng/accordion'; //accordion and accordion tab
import { MenuItem } from 'primeng/api';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TableModule } from 'primeng/table';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, AccordionModule,TableModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

My component.html is:

<h1>Hello {{ title }}</h1>
<br />

<p-table [value]="detail">
  <ng-template pTemplate="header">
    <tr>
      <th>Vin</th>
      <th>Year</th>
      <th>Brand</th>
      <th>Color</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-car>
    <tr>
      <td>Aashiq</td>
      <td>Aadhil</td>
      <td>Zubair</td>
      <td>Athaa</td>
    </tr>
  </ng-template>
</p-table>

My app.component.ts is:

import { Component,OnInit } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {

    throw new Error("Method not implemented.");
  }
  title = 'Angularprimeng';
    detail:any;

}

Answer 1

Good evening!

Have you tried installing the material cdk?

npm install @angular/cdk --save

This should fix your problem.

Regards,

Jonathan

Answer 2

I have faced the same issue. Kindly install below dependant packages by command through Angular CLI.

npm install --save @angular/material @angular/cdk @angular/animations

then again start the application by command ng serve .

It worked for me.

Answer 3

I am happy to read that your package dependency problem has been resolved.

For your second question, given your code, it's completely normal that there is nothing in the table.

The pTemplate "body" that you declared in your HTML file is there to structure the information of each element present in your "detail" property which should be an array.

I ask you to carefully read the PrimeNg documentation to correct your error.

https://primefaces.org/primeng/showcase/#/table

I hope I've helped you. Have a nice evening and see you soon !