Angular Material tabs group content into separate views where only one view can be visible at a time. The tab page content is loaded dynamically into the DOM when activated and remove when the tab is switched.

The TX Text Control DocumentViewer must be initialized and remove when used in lazy loading tabs (or any other partial view conceptional element). The following app.component.html shows a typical scenario with 3 tab pages where the DocumentViewer is used on the second tab:

<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>

In the event handler of the selectedTabChange event, the DocumentViewer must be initialized explicitly using the init method:

import { Component } from '@angular/core';
declare var TXDocumentViewer: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'my-viewer-app';
onTabChanged($event) {
// the DocumentViewer doesn't exist on tab page
if (document.getElementById("txViewer") === null) {
if (typeof(TXDocumentViewer) !== "undefined") {
TXDocumentViewer = undefined;
}
}
else { // the DocumentViewer exists
// wait until object TXDocumentViewer is available (lazy loading)
var checkExist = setInterval(function() {
if (typeof TXDocumentViewer !== "undefined") {
// call init to initialize the viewer
TXDocumentViewer.init( {
containerID: 'txViewer',
viewerSettings: {
toolbarDocked: true,
documentData: "SGVsbG8gdGhlcmU=",
dock: "Fill",
isSelectionActivated: true,
showThumbnailPane: true,
basePath: 'https://backend.textcontrol.com',
}
});
clearInterval(checkExist);
}
}, 100);
}
}
}
view raw app.component.ts hosted with ❤ by GitHub

In an interval, we make sure that the TXDocumentViewer object is available in the JavaScript scope before the init method is called. If the DocumentViewer doesn't exist in the DOM and the object TXDocumentViewer is available, the object is set to undefined.

This way, a clean instance of the DocumentViewer is created when the tab page is opened.