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 { }

Answer 1

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 { }