[FIXED] PrimeNG table not shown on the browser


I have a PrimeNG table in TablePrimeNgComponent.

table-prime-ng.component.html :

<p-table [value]="cars">
    <ng-template pTemplate="header">
    <ng-template pTemplate="body" let-car>


import { Component, OnInit } from '@angular/core';
import { CarService } from '../car.service';

export interface Car {vin; year; brand; color;}

  selector: 'app-table-prime-ng',
  templateUrl: './table-prime-ng.component.html',
  styleUrls: ['./table-prime-ng.component.css']
export class TablePrimeNgComponent implements OnInit {

  cars : Car[];

  constructor(private carservice: CarService) { }

  ngOnInit() {this.cars = this.carservice.getCars();}


CarService is created and successfully returns the car array. I can show the returned data. PrimeNG is also installed.
When I compile and run the program, I do not get any errors. At the same time, the tables doe not render anything to the browser.
Can you help me finding out what the problem is?


You should use <p-column>

<p-dataTable [value]="cars">
  <p-column field="vin" header="Vin"></p-column>
  <p-column field="year"  header="Year">    </p-column>
  <p-column field="color" header="Color"></p-column>



With ng-template also it works well, make sure you declared cols in the template,

 export class DataTableComponent implements OnInit {
  cars: Array<any> = [{"vin":"dsad231ff","year":2012,"brand":"VW","color":"Orange"},{"vin":"gwregre345","year":2011,"brand":"Audi","color":"Black"}];
 cols: any[];
  constructor() { 
    this.cols = [
            { field: 'vin', header: 'Vin' },
            { field: 'year', header: 'Year' },
            { field: 'brand', header: 'Brand' },
            { field: 'color', header: 'Color' }
  ngOnInit() {


Answered By – Sajeetharan

Answer Checked By – Marie Seifert (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published