Pass data from HTML element to angular component to draw chart based on the data

Issue

I am developing a custom dashboard where I display some metrics based on a use case. I want to display these metrics in a tabular format for each use case where each use case many rows of data and a corresponding line chart to show the trend. The table and chart data come from a backend API.

I am able to create the tables for each use case but have don't know how to approach creating the corresponding line charts. Since the data are dynamic and not in any specific order, I am unable to create the corresponding chart under the use case table. To put it differently I am finding it difficult to find the association of use case to create the chart since chart is created from google charts api from the component.

e.g. code

<div *ngFor="let usecase of usecaseList">
  <table>
     <tr>....</tr>
     <td>....</td>
     <td>....</td>
     <td>....</td>
  </table>
  <div id="usecase_line_chart" style="some style"></div>
</div>

The component uses google charts api to create the line chart and that requires the HTML element (in this case div with id usecase_live_chart). The problem is I don't know which use case will be coming in from the list but the chart has to be corresponding to the use case data. I need to find a way to pass the "use case" from HTML to the component and since it is not a custom component i can't pass the data using data or event binding. This is a child component called from a parent component.

Sample component code:

const options = {
      legend: {position: 'right'},
      hAxis: {title: 'x-axis'},
      vAxis: {logScale: false, title: 'Metric value'}
    };
    
    const chartData = arrayToDataTable(this.data.chartdata);
    // this is the chart id from the html which needs to be dynamic based on the use case from table loop
    const chart = new LineChart(document.getElementById(id));  
    chart.draw(chartData, options);

Any suggestion or help would be appreciated on how to generate line chart with the corresponding use case data. Thanks in advance.

Solution

I figured out a way after some thoughts but not sure it was the right approach. I generate the id for the chart element dynamically from the for loop some thing like this

<div id="{{ usecase }}_line_chart" style="some style"></div>

I use this dynamic id in the chart api so it generates the chart with the id for the corresponding use case.

Answered By - Kishore Khan