Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can't bind to 'chart' since it isn't a known property of 'div' #69

Closed
Janatbek opened this issue Oct 9, 2017 · 12 comments
Closed

Can't bind to 'chart' since it isn't a known property of 'div' #69

Janatbek opened this issue Oct 9, 2017 · 12 comments

Comments

@Janatbek
Copy link

Janatbek commented Oct 9, 2017

I just installed angular-highcharts and highcharts, did everything that was documented to start basic chart. But I ma getting this error:

Uncaught Error: Template parse errors:
Can't bind to 'chart' since it isn't a known property of 'div'. ("
  <button (click)="add()">Add Point!</button>
  <div [ERROR ->][chart]="chart"></div>
  "): ng:///EDLModule/EDLComponent.html@2:7
    at syntaxError (compiler.es5.js:1694)
    at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (compiler.es5.js:12937)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (compiler.es5.js:27133)
    at compiler.es5.js:27052
    at Set.forEach (<anonymous>)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:27052)
    at compiler.es5.js:26939
    at Object.then (compiler.es5.js:1683)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26938)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26867)

below is my component:

import { Chart } from 'angular-highcharts';

@Component({
  selector: 'app-edl',
  template: `
  <button (click)="add()">Add Point!</button>
  <div [chart]="chart"></div>
  `
  
})
export class EDLComponent extends BaseWidget {
   /**
   * testing highcharts here
   */
  chart = new Chart({
    chart: {
      type: 'line'
    },
    title: {
      text: 'Linechart'
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'Line 1',
      data: [1, 2, 3]
    }]
  });

// add point to chart serie
  add() {
    this.chart.addPoint(Math.floor(Math.random() * 10));
  }
}
@Janatbek Janatbek closed this as completed Oct 9, 2017
@clsatw
Copy link

clsatw commented Dec 11, 2017

i got the same problem. can anyone help please.

@Janatbek
Copy link
Author

I got it working, but show me your code. you can push your code to github, open an issue on your code. and share with me

@clsatw
Copy link

clsatw commented Dec 11, 2017 •
edited by cebor
Loading

Hi Janatbek,
Here are my code:

<button ion-button (click)="add()">Add Point!</button>
<div [chart]="chart"></div>
import { NgModule, Component } from '@angular/core';
import { AngularFireList } from 'angularfire2/database';
import { Chart } from 'angular-highcharts';
// import {FirebaseProvider} from '/providers/firebase/firebase.ts';
import { Observable } from 'rxjs/Observable';
import { FirebaseProvider } from '../../providers/firebase/firebase';
import { DhtLog } from '../../app/shared/dhtlog.model';

/**
 * Generated class for the Dth11ListComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'dht11-list',
  templateUrl: 'dht11-list.html'
})
export class Dht11ListComponent {
  dhtLogs$: Observable<DhtLog[]>;
  dhtLogList: AngularFireList<DhtLog>;
  // chart: Chart;
  chart = new Chart({
    chart: {
      type: 'line'
    },
    title: {
      text: 'Linechart'
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'Line 1',
      data: [1, 2, 3]
    }]
  }); 
  add() {
    this.chart.addPoint(Math.floor(Math.random() * 10));
  }

  constructor(private dhtLogSvc: FirebaseProvider) {
    console.log('ionViewDidLoad Log component');
    this.dhtLogs$ = this.dhtLogSvc.getDhtData();   
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Log component');
    let x = this.dhtLogSvc.getData(); 
  }
}

thank you.

@clsatw
Copy link

clsatw commented Dec 11, 2017

basically my code is exactly the same as yours.

@cebor
Copy link
Owner

cebor commented Dec 11, 2017

Do you import and bind ChartModule ?

@Janatbek
Copy link
Author

Janatbek commented Dec 12, 2017 via email

@clsatw
Copy link

clsatw commented Dec 12, 2017 via email

@clsatw
Copy link

clsatw commented Dec 18, 2017 via email

@clsatw
Copy link

clsatw commented Dec 18, 2017 via email

@SarraMrbt
Copy link

import ChartModule in your Module

@remster85
Copy link

Resolution is

// app.module.ts
import { ChartModule } from 'angular-highcharts';
 
@NgModule({
  imports: [
    ChartModule // add ChartModule to your imports
  ]
})
export class AppModule {}

as described in https://www.npmjs.com/package/angular-highcharts#usage-example

@jyotiranjankalta81
Copy link

I just installed angular-highcharts and highcharts, did everything that was documented to start basic chart. But I ma getting this error:

Uncaught Error: Template parse errors:
Can't bind to 'chart' since it isn't a known property of 'div'. ("
  <button (click)="add()">Add Point!</button>
  <div [ERROR ->][chart]="chart"></div>
  "): ng:///EDLModule/EDLComponent.html@2:7
    at syntaxError (compiler.es5.js:1694)
    at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (compiler.es5.js:12937)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (compiler.es5.js:27133)
    at compiler.es5.js:27052
    at Set.forEach (<anonymous>)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:27052)
    at compiler.es5.js:26939
    at Object.then (compiler.es5.js:1683)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26938)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26867)

below is my component:

import { Chart } from 'angular-highcharts';

@Component({
  selector: 'app-edl',
  template: `
  <button (click)="add()">Add Point!</button>
  <div [chart]="chart"></div>
  `
  
})
export class EDLComponent extends BaseWidget {
   /**
   * testing highcharts here
   */
  chart = new Chart({
    chart: {
      type: 'line'
    },
    title: {
      text: 'Linechart'
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'Line 1',
      data: [1, 2, 3]
    }]
  });

// add point to chart serie
  add() {
    this.chart.addPoint(Math.floor(Math.random() * 10));
  }
}

ERROR in src/app/modules/checklist/checklist.component.html:58:10 - error NG8002: Can't bind to 'chart' since it isn't a known property of 'div'.

58     <div [chart]="chart"></div>
            ~~~~~~~~~~~~~~~

  src/app/modules/checklist/checklist.component.ts:34:16
    34   templateUrl: './checklist.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ChecklistComponent.

@jyotiranjankalta81 jyotiranjankalta81 mentioned this issue Mar 19, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@cebor @clsatw @Janatbek @SarraMrbt @remster85 @jyotiranjankalta81