How to call a component inside a expandable row in Angular 12

Question

I have a set of data that I need to show in the table and for the same data, I want to show graph representation for that when the user expands the row. What I have achieved yet is an expandable row in the table with some data. My code is as below:

abc.component.ts

import * as $ from 'jquery';
import 'datatables.net';

@Component({
  selector: 'app-abc',
  templateUrl: './abc.component.html',
  styleUrls: ['./abc.component.scss']
})
export class AbcComponent implements OnInit {
  @ViewChild('dataTable', { static: false })
  table!: { nativeElement: any; };

  dataTable: any;
  agentStatsData: TableData[] = [];

  ngOnInit(): void {
    this.getAllStatsData();
  }

  getAllStatsData(): void {
    this.dataService.getStatsData()
      .subscribe((data) => {
        this.agentStatsData = data;
        this.initTableData();
      });
  }

  initTableData() {
    var demoTable = this.dataTable.DataTable({
      "data": this.agentStatsData,
      "columns": [
        { "data": "name" },
        { "data": "type" },
        { "data": "team" },
        { "data": "status" },
        { "data": "totalStudent" },
        { "data": "totalActive" },
        { "data": "totalInActive" }
      ]
    });

    // Row expanding functionality
    $('.dataTable tr').on('click', function () {
      var tr = this;
      var row = demoTable.row(tr);

      if (row.child.isShown()) {
        row.child.hide();
      } else {
        row.child(format(row.data())).show();
      }
    });

    function format(data: any) {
      return '<div>' +
        '<p>Active data: ' + data.totalActive + '</p>' +
        '<p>Inactive data: ' + data.totalInActive + '</p>' +
        '<p>Total: ' + data.totalStudent + '</p>' +
        '</div>';
    }
  }
}

abc.component.html

...
<table width="100%" #dataTable class="table datatable-show-all dataTable table-striped table-responsive">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Team</th>
      <th>Status</th>
      <th>Total Student</th>
      <th>Active</th>
      <th>In Active</th>
    </tr>
  </thead>
</table>
...

The expandable row is showing total active, total inactive, and total student data, but I want to load a chart instead of just numbers.

Answer 1

I've used the material data table and found this link helpful.