CODEWITHSUNDEEP
angularwindowsprimeng
Tom
Tom

Reputation: 8691

PrimeNG data table not displaying in Angular 2 application

I am working on Angular 2 application using typescript in visual studio 2015 solution. I have read the documentation for datatable in PrimeNG website but don't understand why the datatable that I have implemented is not showing. Could somebody help?

risk-list.component.ts 

import { Component } from '@angular/core'

    @Component({
            selector: 'rm-risks',
            templateUrl: 'app/risks/risk-list.component.html'
        })

    export class RiskListComponent {
        pageTitle: string = 'Risk List';
        risks: any[] = [
            {
                "riskId": 1,
                "reference": "HISXX336",
                "insuredName": "sdsdsdsdsd",
                "inceptionDate": "March 19, 2016",
                "riskType": "Test1",
                "status": "Indication",
                "grossPremium": "100",
                "allocatedTo": "XYZ User",
                "allocatedCompany": "XYZ"
            },
            {
                "riskId": 2,
                "reference": "HIXXXXX0",
                "insuredName": "fgfgfgfgfg",
                "inceptionDate": "April 25, 2016",
                "riskType": "Test2",
                "status": "Indication",
                "grossPremium": "312.22",
                "allocatedTo": "PQR User",
                "allocatedCompany": "PQR"
            }


        ];

risk-list.component.html

   <h3 class="first">{{pageTitle}}</h3>

    <p-dataTable [value]="risks" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]">
        <p-column field="reference" header="Reference"></p-column>
        <p-column field="insuredName" header="Insured Name"></p-column>
        <p-column field="inceptionDate" header="Inception Date"></p-column>
        <p-column field="riskType" header="Risk Type"></p-column>
        <p-column field="status" header="Status"></p-column>
        <p-column field="grossPremium" header="Gross Premium"></p-column>
        <p-column field="allocatedTo" header="Allocated To"></p-column>
        <p-column field="allocatedCompany" header="Allocated Company"></p-column>
    </p-dataTable>

app.component.ts

import { Component } from '@angular/core';
import { RiskListComponent } from './risks/risk-list.component';
import {DataTable} from 'primeng/primeng';
import {Column} from 'primeng/primeng';

@Component({
    selector: 'my-app',
    providers: [],
    template: `
    <div>
        <h1>{{pageTitle}}</h1>
          <rm-risks> </rm-risks> 
     </div>
     `,
    directives: [RiskListComponent]

})

export class AppComponent {
    pageTitle: string = 'Test UK Trader'; 
}

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Angular 2 Application</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="app/app.component.css" rel="stylesheet" />


    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>


    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="https://npmcdn.com/[email protected]/es6-shim.min.js"></script>

    <script src="https://npmcdn.com/[email protected]?main=browser"></script>
    <script src="https://npmcdn.com/[email protected]"></script>
    <script src="https://npmcdn.com/[email protected]/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>

<body>
   <my-app>Loading..</my-app>
</body>

</html>

Upvotes: 2

Views: 2935

Answers (2)

Jose
Jose

Reputation: 2299

I got mine to show up by adding the import statement below in my app.module.ts file. Prime documentation did not show that piece but I found it on a working example somewhere. 

    import {DataTableModule} from "primeng/primeng";

Upvotes: 1

Cagatay Civici
Cagatay Civici

Reputation: 6504

I think you need to add DataTable and Column as directives;

@Component({
        selector: 'rm-risks',
        directives: [DataTable,Column],
        templateUrl: 'app/risks/risk-list.component.html'
    })

Upvotes: 0

Related Questions