Can we avoid to pass in the Highcharts instance to the directive?

[liwonder]

For general tech support, please see www.highcharts.com/support. Please report only issues about highcharts-angular wrapper or content of this repository. For general issues with Highcharts and TypeScript the correct repository to report such issues is main Highcharts repository.

Requested feature description

Can we avoid to pass in the Highcharts instance to the directive? We have a lot components are using the directive, sometime we don't want to add one property of 'Highchrts', it would make repetitive and tedious. Instead of make all the compoent inherit from one base file, could we make the 'highchart-angular' use depedency of highcharts? Just like 'angular2-highcharts' used to do?

Or do you have some other consideration on this? Thanks in advance!

[karolkolodziej]

You might create your own component to which you pass the Highcharts and/or some default options. Then you might reuse that component everywhere without constantly passing the Highcharts. Simple demo: https://stackblitz.com/edit/highcharts-angular-basic-line-fxticl

[liwonder]

@karolkolodziej , Seems this could be best solution for now, thanks!

[liwonder]

A reminder to add, I finally came out one method to do this, see the example below:

import { Component, ElementRef, NgZone } from '@angular/core';
import { HighchartsChartComponent } from 'highcharts-angular';

import * as Highcharts from 'highcharts';

@Component({
    selector: 'your-highcharts-angular',
    template: ``,
})

export class YourHighchartsAngularDirective extends HighchartsChartComponent {

    constructor(el: ElementRef, zone: NgZone) {
        super(el, zone);
        this.Highcharts = Highcharts;
    }
}

Just inherit the official highchart-angular component and set the 'Highcharts' instance here. you can use the directive <your-highcharts-angular [options]="yourOptions"></your-highcharts-angular>

All the input and output stay the same, except you don't nee to support on highchart instance everywhere. Maybe this can help somebody.