CODEWITHSUNDEEP
angulartypescript
Shubham Verma
Shubham Verma

Reputation: 9963

Can't bind to 'chartData' since it isn't a known property of 'div', in angular 2?

I am creating an angular project but while developing this I got error below. I tried to solve this but I didn't.

EXCEPTION: Uncaught (in promise): Error: Template parse errors: Can't bind to 'chartData' since it isn't a known property of 'div'.

EXCEPTION: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'chartData' since it isn't a known property of 'div'. ("<h1>Profile- {{name}} here</h1>
<div id="pie_chart",
    [ERROR ->][chartData]="pie_ChartData", 
    [chartOptions] = "pie_ChartOptions",
    chartType="PieChart",
"): ProfileComponent2@2:4

Please suggest me where I am doing wrong.

profile.component.ts:

import { Component, OnInit,HostBinding,Input }         from '@angular/core';
import { Router,ActivatedRoute }                 from '@angular/router';
import { slideInDownAnimation }                  from '../../animations/animations'
import { GoogleChart}                             from'../../../../directives/angular2-google-chart.directive';

@Component({
    selector: 'profile-component2',
    directives: [GoogleChart],
    templateUrl:`../app/modules/dashboard/dashComponents/profileComponents/profile.component.html`,
    animations:[slideInDownAnimation]
})

export class ProfileComponent2 implements OnInit {

name="Shubham";
message: string;
@HostBinding('@routeAnimation') routeAnimation = true;
@HostBinding('style.display')   display = 'block';
@HostBinding('style.position')  position = 'absolute';
public login:{} = {};
private interval:any;
ngOnInit() {
      console.log("profile component2 initialized");
  }
       public pie_ChartData = [
                 ['Task', 'Hours per Day'],
                 ['Work',     11],
                 ['Eat',      2],
                 ['Commute',  2],
                 ['Watch TV', 2],
                 ['Sleep',    7] ];

       public pie_ChartOptions  = {
         title: 'My Daily Activities',
         width: 900,
         height: 500
       };  
}

profile.component.html:

<h1>Profile- {{name}} here</h1>
<div id="pie_chart",
    [chartData]="pie_ChartData", 
    [chartOptions] = "pie_ChartOptions",
    chartType="PieChart",
    GoogleChart>    </div>

Upvotes: 3

Views: 3001

Answers (1)

Shubham Verma
Shubham Verma

Reputation: 9963

Yes, Got the answer.

Add below line in app.module.ts:

import {GoogleChart} from '../directives/angular2-google-chart.directive';

@NgModule({
  imports: [ ],
  declarations: [GoogleChart]
})

Upvotes: 1

Related Questions