Can't bind to 'value' since it isn't a known property of 'p-dataTable'

Question

I'm developing aspnetzero application with angular but when I'm assigning value of categories property in p-dataTable I'm getting this error in browser console:

Can't bind to 'value' since it isn't a known property of 'p-dataTable'

I have three files. First file categories.component.ts

    import { Component, Injector, OnInit } from '@angular/core';
    import { AppComponentBase } from '@shared/common/app-component-base';
    import { appModuleAnimation } from '@shared/animations/routerTransition';


    import { Http, Response, Headers, RequestOptions } from "@angular/http";
    import { AppSessionService } from '@shared/common/session/app-session.service';
    import { Category } from './category';
    import { DataTableModule, SharedModule, DataTable } from 'primeng/primeng';


    @Component({
        templateUrl: './categories.component.html',
        animations: [appModuleAnimation()]
    })
    export class CategoriesComponent extends AppComponentBase implements OnInit {

        categories: Category[];

        constructor(
            injector: Injector,
            private http: Http,
            private appSessionService: AppSessionService
        ) {
            super(injector);
        }

        ngOnInit(): void {
            this.getCategories();
        }

        getCategories(): void {

            let headers = new Headers({ 'Content-Type': 'application/json' })
            headers.append('tenantId', this.appSessionService.tenant ? this.appSessionService.tenant.id.toString() : '-1');
            let options = new RequestOptions({ headers: headers });
            this.http.get('/api/categories', options).subscribe(values => {
                this.categories = values.json();
            });
        }
    }

Second categories.component.html

          <div [@routerTransition]>
           <div class="row margin-bottom-5">
              <div class="col-xs-12">
                  <div class="page-head">
                      <div class="page-title">
                          <h1>
                             <span>{{l("Categories")}}</span>
                         </h1>
                     </div>
                  </div>
              </div>
           </div>

        <div class="portlet light margin-bottom-0">
            <div class="portlet-body">
                <p-dataTable [value]="categories">
                    <p-column field="category.Name" header="Category"></p- column>
                </p-dataTable>
            </div>
        </div>
    </div>

and Category class

    export class Category {
        constructor(
            public id: number,
            public name: string) { }
    }

This is app.module.ts

import { NgModule } from '@angular/core';
import * as ngCommon from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { ModalModule, TooltipModule, TabsModule } from 'ngx-bootstrap';
import { FileUploadModule } from '@node_modules/ng2-file-upload';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/layout/header.component';
import { HeaderNotificationsComponent } from './shared/layout/notifications/header-notifications.component';
import { SideBarComponent } from './shared/layout/side-bar.component';
import { FooterComponent } from './shared/layout/footer.component';
import { LoginAttemptsModalComponent } from '@app/shared/layout/login-attempts-modal.component';
import { ChangePasswordModalComponent } from '@app/shared/layout/profile/change-password-modal.component';
import { ChangeProfilePictureModalComponent } from '@app/shared/layout/profile/change-profile-picture-modal.component';
import { MySettingsModalComponent } from '@app/shared/layout/profile/my-settings-modal.component';
import { SmsVerificationModalComponent } from '@app/shared/layout/profile/sms-verification-modal.component';
import { AbpModule } from '@abp/abp.module';
import { UtilsModule } from '@shared/utils/utils.module';
import { AppCommonModule } from './shared/common/app-common.module';
import { ServiceProxyModule } from '@shared/service-proxies/service-proxy.module';
import { ImpersonationService } from './admin/users/impersonation.service';
import { LinkedAccountService } from './shared/layout/linked-account.service';
import { LinkedAccountsModalComponent } from '@app/shared/layout/linked-accounts-modal.component';
import { LinkAccountModalComponent } from '@app/shared/layout/link-account-modal.component';
import { NotificationsComponent } from './shared/layout/notifications/notifications.component';
import { NotificationSettingsModalCompoent } from './shared/layout/notifications/notification-settings-modal.component';
import { UserNotificationHelper } from './shared/layout/notifications/UserNotificationHelper';
import { ChatBarComponent } from './shared/layout/chat/chat-bar.component';
import { ChatFriendListItem } from './shared/layout/chat/chat-friend-list-item.component';
import { ChatSignalrService } from '@app/shared/layout/chat/chat-signalr.service';
import { QuickSideBarChat } from '@app/shared/layout/chat/QuickSideBarChat';
import { DataTableModule } from 'primeng/primeng';
import { PaginatorModule } from 'primeng/primeng';

@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        HeaderNotificationsComponent,
        SideBarComponent,
        FooterComponent,
        LoginAttemptsModalComponent,
        LinkedAccountsModalComponent,
        LinkAccountModalComponent,
        ChangePasswordModalComponent,
        ChangeProfilePictureModalComponent,
        MySettingsModalComponent,
        SmsVerificationModalComponent,
        NotificationsComponent,
        ChatBarComponent,
        ChatFriendListItem,
        NotificationSettingsModalCompoent
    ],
    imports: [
        ngCommon.CommonModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        ModalModule.forRoot(),
        TooltipModule.forRoot(),
        TabsModule.forRoot(),
        FileUploadModule,
        AbpModule,
        AppRoutingModule,
        UtilsModule,
        AppCommonModule.forRoot(),
        ServiceProxyModule,
        DataTableModule,
        PaginatorModule
    ],
    providers: [
        ImpersonationService,
        LinkedAccountService,
        UserNotificationHelper,
        ChatSignalrService,
        QuickSideBarChat
    ]
})
export class AppModule { }

score 18 · Accepted Answer · answered Nov 15 '17 at 11:32

I have fixed this error. In aspnnetzero there are two files where it needs to import DataTable. I had to import DataTable in app/main/main.module.ts.

main.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CategoriesComponent } from './categories/categories.component';
import { CreateOrEditCagoryModalComponent } from './categories/create-or-edit-category-modal.component';

import { ModalModule, TabsModule, TooltipModule } from 'ngx-bootstrap';
import { AppCommonModule } from '@app/shared/common/app-common.module';
import { UtilsModule } from '@shared/utils/utils.module';
import { MainRoutingModule } from './main-routing.module';
import { CountoModule } from '@node_modules/angular2-counto';
import { EasyPieChartModule } from 'ng2modules-easypiechart';
import { DataTableModule } from 'primeng/primeng'; // Here
import { PaginatorModule } from 'primeng/primeng'; // Here

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ModalModule,
        TabsModule,
        TooltipModule,
        AppCommonModule,
        UtilsModule,
        MainRoutingModule,
        CountoModule,
        EasyPieChartModule,
        DataTableModule, // Added DataTableModule
        PaginatorModule //  Added PaginatorModule

    ],
    declarations: [
        DashboardComponent,
        CategoriesComponent,
        CreateOrEditCagoryModalComponent
    ]
})
export class MainModule { }

score 6 · Answer 2 · answered Aug 02 '18 at 01:15

6

If you are using feature modules for Lazy loading you may get this error as well. Even though you have a declaration in app.module.ts. You have to import it in your feature modules as well.

Example: you have a feature module called "pastorders". Then you have to import it in pastorders.module.ts file like below

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {PastordersRoutingModule} from './pastorders-routing.module';
import { PastordersComponent } from './pastorders/pastorders.component';

import {DataTableModule} from 'primeng/primeng'; // Declare here

@NgModule({
  imports: [
    CommonModule,
    DataTableModule, // declare here 
    PastordersRoutingModule
  ],
  declarations: [PastordersComponent]
})
export class PastordersModule { }

In addition to app.module.ts file declaration.

Note: In the latest version of primeng ( V5 and above) it has been renamed to "TableModule". check your package.json file before making changes.

answered Aug 02 '18 at 01:15

Ragavan Rajan

4,171
1
25
43

1

The Angular team really needs to improve some of their error messages, this is another example of a completely obscure error message which means nothing to the developer. – Greg Quinn Aug 26 '18 at 23:52
Yes Indeed Gregg. I have spent half of my day to figure out why it is causing error – Ragavan Rajan Aug 26 '18 at 23:54
I agree Raggavan – Greg Quinn Aug 27 '18 at 22:42
For V5 and above p-dataTable has become p-table as per https://stackoverflow.com/questions/52983328/primeng-differnce-between-p-table-and-p-datatable – Greg Trevellick Aug 04 '20 at 10:19

Mohammed Osman · Answer 3 · 2020-11-29T06:17:38.300

4

In new versions of angular, import TableModule from primeng/table.

import { TableModule } from 'primeng/table';

@NgModule({    
   imports: [
   // ...
   TableModule,
   // ...
   ]
})
export class AppModule {}

edited Nov 29 '20 at 06:17

answered Mar 04 '20 at 08:32

Mohammed Osman

3,688
2
27
25

score 3 · Answer 4 · answered Jul 14 '21 at 10:49

I had the same error. But my If was different.If you are using custom html tags, ie some libraries, then it will report that Template parse errors. You can fix it by add CUSTOM_ELEMENTS_SCHEMA in your module.

Import it

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

And add it to schemas in your module

 schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

Can't bind to 'value' since it isn't a known property of 'p-dataTable'

4 Answers4