eCharts Tooltip Formatter - Possible to use Angular ng-container?

Question

I want to include ng-container in my eCharts Tooltip formatter.

I found the following link (How to format the tooltip value in echart (angular)) and it is working to create a simple HTML output, but I want to create something more sophisticated in my tooltip.

Here is what I tried:

Component HTML:

...
<ng-template #templateHistogram let-myData="paramData">
   <app-chart-bar [histogramData]='myData'> </app-chart-bar>
</ng-template>
...

My "app-chart-bar" component is working fine (with my histogramData input) when I use this somewhere else in my app. Did I maybe mix up with the parameter assignments?

Component TS:

...
tooltip: {
   ...
   formatter: function (params: any) {
      // transforming Formatter params into paramData which I want to display in my Histogram. I checked that paramData is working and has correct format
      const returnString = `<ng-container *ngIf="paramData" *ngTemplateOutlet="templateHistogram; context: {paramData: ${paramData}}"> </ng-container>`;
      return returnString
   }
},

Unfortunately, during the rendering it seems that my returnString is changed slightly:

ngIf was changed to ngif
ngTemplateOutlet was changed to ngtemplateoutlet
Wired though that #templateHistogram and paramData has not been changed

See DOM Element in Google Chrome Dev Tool:

<ng-container *ngif="paramData" *ngtemplateoutlet="templateHistogram; context: {paramData: [object Object],[object Object],...,[object Object]}"> </ng-container>

Since Angular is case sensitive here, I guess that this is the issue here. However, I have no clue on how to fix that. Has anyone ever encountered that issue?

Any help would be highly appreciated - Thanks!

eCharts Tooltip Formatter - Possible to use Angular ng-container?

0 Answers0