app.component.html

<mat-tab-group (selectedTabChange)="onTabChanged($event);">

  <mat-tab label="Tab 1">
    <h1>Content 1</h1>
    <p>Text Control for Angular</p>
  </mat-tab>

  <mat-tab label="Tab 2 - Lazy Loaded Viewer">
    <ng-template matTabContent>
      
      <h1>Content 2</h1>

      <tx-document-viewer
        width="800px"
        height="600px"
        basePath="https://backend.textcontrol.com?access-token=your-token"
        documentData="SGVsbG8gdGhlcmU="
        dock="Fill"
        toolbarDocked=true
        documentPath="test.docx"
        isSelectionActivated=true
        showThumbnailPane=true>
      </tx-document-viewer>   

    </ng-template>

  </mat-tab>

  <mat-tab label="Tab 3">
    <h1>Content 3</h1>
    <p>Text Control for Angular</p>
  </mat-tab>

</mat-tab-group>