I have multiple tabs view with a ponent rendering in each one of them. Here is the code for that:

<mat-tab-group>
                    <mat-tab *ngFor="let g of goals; index as i">
                        <ng-template mat-tab-label>{{g.name}}</ng-template>
                        <div class="row">
                            <app-summary [goal]="g"></app-summary>
                        </div>
                        <div class="row">
                            <mat-table #table [dataSource]="dataSource[i]">
                                ## some table content here
                            </mat-table>
                        </div>
                    </mat-tab>
                </mat-tab-group>

Here is what app-summary looks like:

<div fxLayout="column" fxLayoutGap="20px" style="padding: 20px; width: 1100px;">
  <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start start">
    <div fxFlex="55">
      <mat-card class="summary-card">
        <mat-card-content>
          <chart [options]="wealthOptions"></chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div fxFlex="25">
      <mat-card class="summary-card">
        <mat-card-content>
          <chart [options]="pieProbOptions"></chart>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>

The <chart> contains highchart views. However, the charts are available only for the first tab. The ponent is loaded and rendered for each tab.

Is there something missing here or needs to be done is certain way?

I have multiple tabs view with a ponent rendering in each one of them. Here is the code for that:

<mat-tab-group>
                    <mat-tab *ngFor="let g of goals; index as i">
                        <ng-template mat-tab-label>{{g.name}}</ng-template>
                        <div class="row">
                            <app-summary [goal]="g"></app-summary>
                        </div>
                        <div class="row">
                            <mat-table #table [dataSource]="dataSource[i]">
                                ## some table content here
                            </mat-table>
                        </div>
                    </mat-tab>
                </mat-tab-group>

Here is what app-summary looks like:

<div fxLayout="column" fxLayoutGap="20px" style="padding: 20px; width: 1100px;">
  <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start start">
    <div fxFlex="55">
      <mat-card class="summary-card">
        <mat-card-content>
          <chart [options]="wealthOptions"></chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div fxFlex="25">
      <mat-card class="summary-card">
        <mat-card-content>
          <chart [options]="pieProbOptions"></chart>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>

The <chart> contains highchart views. However, the charts are available only for the first tab. The ponent is loaded and rendered for each tab.

Is there something missing here or needs to be done is certain way?

• javascript
• angular
• highcharts
• angular-material2

2 Answers 2

I know it's late, but I am sure it will help someone because it took me forever to find this in an offhanded ment. One way to load highcharts in tabs is to lazy load the tab with the angular attribute <ng-template matTabContent> like so

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

  <mat-tab label="second">
    <ng-template matTabContent>
      <highcharts-child-ponent [list]="dataList"></highcharts-child-ponent>
    </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 ponent 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>

It is because, when you initialize the highcharts, except first tab, others are not in DOM, and therefore are not available to be initialized.

You will have to listen for some tab-change event, and then reinitialize the highcharts after the tab is rendered.