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

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

Continue reading...