Is there a Lifecycle Hook for components nested inside mat-tab?

Question

New to Tabulator.

I have a mat-tab-group that I'm using for navigating through three Tabulator Tables.

The approach that I'm using is to create a div element inside component.ts, and the insert it into an existing div within the component.html.

The issue that I'm having is that only the selected tab has its html loaded into the DOM, so any div elements in an unselected tab aren't in the DOM, and cant be referenced by id into my component.ts. When I switch to a tab other than the one that was initially loaded, the tabulator table is not drawn.

What hoping is that Angular has a lifecycle hook that get's called on child-components of mat-tab that I can use to trigger a draw, when a user selects that tab.

I'm open to other/better approaches, of course.

mat-tab-group html

<mat-tab-group *ngIf="hasData" mat-align-tabs="start">
    <mat-tab *ngFor="let tablename of tableNames">
        <ng-template matTabLabel>
            <span>{{tablename}}</span>
        </ng-template>
        <div>
            <app-tabulator-table *ngIf="dataServiceSelectedDate" [integrationName]="integrationName" [tableName]="tablename" [processDate]=dataServiceSelectedDate>
            </app-tabulator-table>
        </div>
    </mat-tab>
</mat-tab-group>

tablulator-table.component.ts

export class TabulatorTableComponent implements OnInit {

  @Input() tableName: string;
  @Input() processDate: string;
  @Input() integrationName: string;

  fields: RunDataTableField[];
  dataContent: RunDataContent;

  tab = document.createElement("div");
  tabColumns: any[] = [];
  tabRows: any[] = [];

  constructor(private clientDataService: ClientDataService) {
  }

  ngOnInit() {
    this.clientDataService.getRunDataContent(this.integrationName, this.processDate, `${this.tableName}.json`).toPromise().then(dataContent => 
      {
        console.log(this.dataContent)
        this.tabColumns = this.buildHeaders(dataContent);
        this.tabRows = this.buildRows(dataContent);
        this.redraw();
      });
  }

  calculationFormatter = function (cell, formatterParams) {
    var value = cell.getValue();
    cell.getElement().style.backgroundColor = "#fdd0ff";
    return value;
  }

  buildHeaders(runData: RunDataContent): any[] {
    console.log(`${this.tableName}: creating headers object`);
    var headers: any[] = [];
    runData.schema.fields.forEach(f => {
      var c: any = {};
      c.title = f.name;
      c.field = f.name;
      c.headerFilter = "input"
      switch (f.validationType) {
        case "calculation": {
          c.formatter = this.calculationFormatter
          break;
        }
        case "raw": {

        }
        case "table": {

        }

        default: {
          break;
        }
      }
      if (f.tip != null && f.tip.length > 0) {
        c.tooltip = f.tip;
        c.headerTooltip = f.tip;
      }
      headers = headers.concat(c);
    });
    console.log(`${this.tableName}: createad headers object`);
    console.log(this.tabColumns);
    return headers;
  }

  buildRows(runData: RunDataContent): any[] {
    console.log(`${this.tableName}: creating rows object`);
    var rows: any[] = [];
    runData.rows.forEach(f => {
      rows = this.tabRows.concat(f);
    });
    return rows;
  }



  private drawTable(): void {
    new Tabulator(this.tab, {
      layout: "fitDataStretch",
      selectable: true,
      selectableRangeMode: "click",
      data: [],
      columns: this.tabColumns,
      height: "311px"
    });
    document.getElementById(`${this.tableName}`).appendChild(this.tab);

    new Tabulator()
  }

  redraw() {
    console.log(`${this.tableName}: drawing table`)
    this.drawTable();
    console.log(`${this.tableName}: completed drawing table`)
  }
}

Answer 1

According to Angular Material Docs, By default, the tab contents are eagerly loaded. Eagerly loaded tabs will initalize the child components but not inject them into the DOM until the tab is activated. If the tab contains several complex child components or the tab's contents rely on DOM calculations during initialization, it is advised to lazy load the tab's content. Tab contents can be lazy loaded by declaring the body in a ng-template with the matTabContent attribute.

So, the correct approach would be to use ng-template with matTabContent. Please find below code for reference :

<mat-tab *ngFor="let table of tableNames" [label]="table"> 
        <ng-template matTabContent>
           <div>
              <app-tabulator-table *ngIf="dataServiceSelectedDate" 
                [integrationName]="integrationName" [tableName]="tablename" 
                [processDate]=dataServiceSelectedDate>
              </app-tabulator-table>
           </div>

        </ng-template>
</mat-tab>