xieziyu / ngx-echarts

An angular (ver >= 2.x) directive for ECharts (ver >= 3.x)
https://xieziyu.github.io/ngx-echarts/
MIT License
1.11k stars 197 forks source link

Enhancement request: mark @Inputs as nullable #378

Closed jimivdw closed 1 year ago

jimivdw commented 1 year ago

Upon enabling the Angular compiler optionstrictTemplates: true in my code base, I noticed that all of the directive @Input()s are typed as non-nullable. With that rule enabled, the following bit of code is no longer valid:

<div echarts [options]="chartOptions$ | async" (chartInit)="chartInit($event)"></div>

error TS2322: Type 'EChartsOption | null' is not assignable to type 'EChartsOption'. Type 'null' is not assignable to type 'EChartsOption'.

I checked the directive implementation and it appears that all @Inputs are already treated as nullable, but just not typed as such. Would it be possible to change that, such that we get something like:

  @Input() options?: EChartsOption | null;
  @Input() theme?: string | ThemeOption | null;
  @Input() loading?: boolean | null;
  @Input() initOpts?: {
    devicePixelRatio?: number;
    renderer?: string;
    width?: number | string;
    height?: number | string;
    locale?: string;
  } | null;
  @Input() merge?: EChartsOption | null;
  @Input() autoResize = true;
  @Input() loadingType = 'default';
  @Input() loadingOpts?: object | null;

Currently, I have to make use of $any to get past the compilation error, which is not ideal:

<div echarts [options]="$any(chartOptions$ | async)" (chartInit)="chartInit($event)"></div>

An alternative would be to add an *ngIf:

<div echarts *ngIf="chartOptions$ | async as chartOptions" [options]="chartOptions" (chartInit)="chartInit($event)"></div>

But I do not want to do this, since that would unnecessarily delay the initialisation of echarts on the element.

Thanks a lot for maintaining this library. Hoping to hear your thoughts!

N.B. I personally would only need options & merge to be nullable, but I think it makes sense for all other options as well.

xieziyu commented 1 year ago

Fixed in PR: https://github.com/xieziyu/ngx-echarts/pull/379

Please try to upgrade ngx-echarts@v15.0.1