While working on my Angular project, I encountered the following error that I have been unable to resolve:
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
I would appreciate any suggestions on where I might be making a mistake.
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>