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

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></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`)
  }
}

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