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

bugfix/chartInstance-emitter

Author: karolkolodziej

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";
+	}
 }