How to render ng2 chart after it's disabled

Question

I have a following bar chart which is disabled onInit

  <div style="display: block" *ngIf="showBar">
  <canvas baseChart height="75"
          [data]="barChartData"
          [labels]="barChartLabels"
          [chartType]="'bar'"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
</div>

bar-graph.component.ts file:

export class BarGraphComponent implements OnInit {
showBar: boolean;
ngOnInit() {
this.showBar = false;
}

I want to enable this chart in the app.components.ts file using a switch statement (changing depending on what's passed from a previous chart). However in the app component.ts file, if I do this.showBar = true (using emitters) it still doesn't work. Any guidance will be appreciated.

sharsart sharsart · Accepted Answer · 2018-05-17T23:34:36

Solved the issue this morning. Instead of declaring *ngIf in the bar-graph.component.html. It should be declared in the app.component.html

<app-bar-graph *ngIf="showBarGraph" [config]="barConfig" (notify)="onNotify($event)"></app-bar-graph>

And then inside the app.component.ts

export class AppComponent implements OnInit {
showBarGraph: boolean;
... logic goes here ....
this.showBarGraph = true;

Hope this helps someone down the road

How to render ng2 chart after it's disabled

1 Answers