Merge pull request #381 from highcharts/bugfix/chartInstance-emitter

bugfix/chartInstance-emitter

highcharts-angular/src/lib/highcharts-chart.component.ts

@@ -1,4 +1,5 @@
-import { Component, ElementRef, EventEmitter, Input, OnDestroy, Output, NgZone, OnChanges, SimpleChanges } from '@angular/core';
+import type { OnChanges, OnDestroy } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, Output, NgZone, SimpleChanges } from '@angular/core';
 import type * as Highcharts from 'highcharts';
 import type HighchartsESM from 'highcharts/es-modules/masters/highcharts.src';
 
@@ -16,17 +17,17 @@ export class HighchartsChartComponent implements OnDestroy, OnChanges {
  @Input() update: boolean;
 
  @Output() updateChange = new EventEmitter<boolean>(true);
- @Output() chartInstance = new EventEmitter<Highcharts.Chart>(); // #26
+ @Output() chartInstance = new EventEmitter<Highcharts.Chart | null>(); // #26
 
- private chart: Highcharts.Chart;
+ private chart: Highcharts.Chart | null;
 
  constructor(
  private el: ElementRef,
  private _zone: NgZone // #75
  ) {}
 
  ngOnChanges(changes: SimpleChanges): void {
- const update = changes.update && changes.update.currentValue;
+ const update = changes.update?.currentValue;
  if (changes.options || update) {
  this.wrappedUpdateOrCreateChart();
  if (update) {
@@ -46,10 +47,10 @@ export class HighchartsChartComponent implements OnDestroy, OnChanges {
  }
 
  updateOrCreateChart() {
- if (this.chart && this.chart.update) {
+ if (this.chart?.update) {
  this.chart.update(this.options, true, this.oneToOne || false);
  } else {
- this.chart = (this.Highcharts as any)[this.constructorType || 'chart'](
+ this.chart = this.Highcharts[this.constructorType || 'chart'](
  this.el.nativeElement,
  this.options,
  this.callbackFunction || null

src/app/line-chart/line-chart.component.css

@@ -2,7 +2,7 @@ article {
  display: flex;
 }
 
-button:first-of-type {
+button{
  margin-right: 1rem;
 }
 
@@ -15,7 +15,7 @@ h2 {
  font-size: 1.25rem;
  margin: 0 0 1.5rem 0;
 }
- 
+
 highcharts-chart {
  flex-grow: 3;
 }

src/app/line-chart/line-chart.component.html

@@ -1,19 +1,19 @@
 <h2>Demo #1: Highcharts with a basic editor</h2>
 <article>
  <section>
- <textarea rows="16" cols="50"
- [(ngModel)]="optFromInputString"
- ></textarea>
+ <textarea rows="16" cols="50" [(ngModel)]="optFromInputString"></textarea>
  <div class="buttons-wrapper">
- <button (click)="updateInputChart()">Update chart</button>
- <button (click)="toggleSeriesType()">1st series type toggle</button>
+ <button [disabled]="!showChart" (click)="updateInputChart()">Update chart</button>
+ <button [disabled]="!showChart" (click)="toggleSeriesType()">1st series type toggle</button>
+ <button (click)="toggleChart()">{{ toggleButtonTitle }}</button>
  </div>
  </section>
- <highcharts-chart 
+ <highcharts-chart
+ *ngIf="showChart"
  [Highcharts]="Highcharts"
  [options]="optFromInput"
  [(update)]="updateFromInput"
- [oneToOne]=true
+ [oneToOne]="true"
  (chartInstance)="logChartInstance($event)"
  ></highcharts-chart>
-</article>
+</article>

src/app/line-chart/line-chart.component.ts

@@ -1,58 +1,67 @@
-import { Component } from '@angular/core';
-import * as Highcharts from 'highcharts';
-import HC_customEvents from 'highcharts-custom-events';
+import { Component } from "@angular/core";
+import * as Highcharts from "highcharts";
+import HC_customEvents from "highcharts-custom-events";
 HC_customEvents(Highcharts);
 
 @Component({
- selector: 'app-line-chart',
- templateUrl: './line-chart.component.html',
- styleUrls: ['./line-chart.component.css']
+ selector: "app-line-chart",
+ templateUrl: "./line-chart.component.html",
+ styleUrls: ["./line-chart.component.css"],
 })
 export class LineChartComponent {
- Highcharts: typeof Highcharts = Highcharts; // Highcharts, it's Highcharts
+ public Highcharts: typeof Highcharts = Highcharts;
+ public updateFromInput = false;
+ public showChart = true;
+ public toggleButtonTitle = "Destroy chart";
 
- optFromInputString: string = `
- {
- "title": { "text": "Highcharts chart" },
- "series": [{
- "data": [11,2,3],
- "zones": [{
- "value": 7.2,
- "dashStyle": "dot",
- "color": "red"
+ private optFromInputString = `
+ {
+ "title": { "text": "Highcharts chart" },
+ "series": [{
+ "data": [11,2,3],
+ "zones": [{
+ "value": 7.2,
+ "dashStyle": "dot",
+ "color": "red"
+ }]
+ }, {
+ "data": [5,6,7]
  }]
- }, {
- "data": [5,6,7]
- }]
- }
+ }
  `;
+ private optFromInput: Highcharts.Options = JSON.parse(
+ this.optFromInputString,
+ );
+ private seriesTypes = {
+ line: "column",
+ column: "scatter",
+ scatter: "spline",
+ spline: "line",
+ };
 
- optFromInput: Highcharts.Options = JSON.parse(this.optFromInputString);
- updateFromInput: boolean = false;
+ // Demonstrate chart instance
+ public logChartInstance(chart: Highcharts.Chart) {
+ if (chart) {
+ console.log("Chart instance received:", chart);
+ } else {
+ console.log("Chart instance destroyed");
+ }
+ }
 
- // Demonstrate chart instance
- logChartInstance(chart: Highcharts.Chart) {
- console.log('Chart instance: ', chart);
- }
-
- updateInputChart() {
- this.optFromInput = JSON.parse(this.optFromInputString);
- }
-
- seriesTypes: {[key: string]: string} = {
- line: 'column',
- column: 'scatter',
- scatter: 'spline',
- spline: 'line'
- };
-
- toggleSeriesType(index: number = 0) {
- this.optFromInput.series[index].type =
- this.seriesTypes[this.optFromInput.series[index].type || 'line'] as
- 'column' | 'scatter' | 'spline' | 'line';
- // nested change - must trigger update
- this.updateFromInput = true;
- }
+ public updateInputChart() {
+ this.optFromInput = JSON.parse(this.optFromInputString);
+ }
 
+ public toggleSeriesType(index = 0) {
+ this.optFromInput.series[index].type = this.seriesTypes[
+ this.optFromInput.series[index].type || "line"
+ ] as keyof typeof this.seriesTypes;
+ // nested change - must trigger update
+ this.updateFromInput = true;
+ }
 
+ public toggleChart() {
+ this.showChart = !this.showChart;
+ this.toggleButtonTitle = this.showChart ? "Destroy chart" : "Recreate chart";
+ }
 }