Highcharts Not Loading In Tabs

I have multiple tabs view with a component rendering in each one of them. Here is the code for that: <ng-template matTabContent> like so

<mat-tab-group class="secondary-tab-group has-header"
               [dynamicHeight]="true"
               mat-stretch-tabs>
  <mat-tab label="first">
    <child-component></child-component>
  </mat-tab>

  <mat-tab label="second">
    <ng-template matTabContent>
      <highcharts-child-component [list]="dataList"></highcharts-child-component>
    </ng-template>
  </mat-tab>

</mat-tab-group>

You can read the angular tabs documentation here with a more basic example of lazy loading.

You don't need a parent/child component structure I have and possibly do something like this

<mat-tab-group class="secondary-tab-group has-header"
               [dynamicHeight]="true"
               mat-stretch-tabs>
  <mat-tab label="first">
    hello world
  </mat-tab>

  <mat-tab label="second">
    <ng-template matTabContent>
      <div>
        <chart (load)="saveInstance($event.context)" [optoins]="highchartOptions"></chart>
      </div>
    </ng-template>
  </mat-tab>

</mat-tab-group>