Can't bind to 'data' since it isn't a known property of 'p-chart'

6
votes

Link:https://www.primefaces.org/primeng/#/chart/bar As given in the above link i tried giving code in .ts and html . And i have installed chart.js and primeng and m getting this error.

Can't bind to 'data' since it isn't a known property of 'p-chart'.

  1. If 'p-chart' is an Angular component and it has 'data' input, then verify that it is part of this module.
  2. If 'p-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" ][data]="data">

"): ng:///AppModule/BarComponent.html@1:20 'p-chart' is not a known element: 1. If 'p-chart' is an Angular component, then verify that it is part of this module. 2. If 'p-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]

2
angularprimeng
you need to add FormsModule. Here is a link to solve this issue: stackoverflow.com/a/45633230/1791913 – Faisal
Hi Faisal . i have already tried that way but i didn't work – Sharz
mmm it look like you've not imported the chart module . .cause it don't know that is p-cahert – federico scamuzzi
Hi i cleared it. The problem was with import { ChartModule } from 'primeng/primeng'; – Sharz
WHere to add import { ChartModule } from 'primeng/primeng'; ?? for me still its showing same error!! – shreedhar bhat

2 Answers

2
votes

have you tried to import the ChartModule to your project?:

Import this:

import { ChartModule } from 'primeng/chart';

and add this to your imports:

imports: [
    ChartModule
  ]
0
votes

For me: create new child page inside another page. I haved do this: in parent.module.ts

import { FormsModule} from '@angular/forms';
import { CoreModule } from '@app/core';
import { SharedModule } from '@app/shared';
import { HttpModule } from '@angular/http';
import { NgxCircularSliderModule } from "@app/shared/ngx-circular-slider/src/public_api";

@NgModule({
entryComponents: [
 ImportDataPopupComponent,ImportDataChartComponent
],
  imports: [
    CommonModule,
    TranslateModule,
    FormsModule,
    CommonModule,
    TranslateModule,
    CoreModule,
    SharedModule,
    HttpModule,
    NgxCircularSliderModule
  ],
  declarations: [ImportDataComponent,ImportDataPopupComponent,ImportDataChartComponent],
providers: [
ImportDataService
  ]
})

I miss these:
CommonModule, TranslateModule, CoreModule, SharedModule, HttpModule, NgxCircularSliderModule

after that My chart Appear like a magic!! hope it helpful.