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:

Loading...

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

Loading...

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.