Lazy Loading

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:

Content 1 Text Control for Angular

Content 2

Content 3 Text Control for Angular

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

}

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

TX Text Control .NET Server

DS Server

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

Blog

Core Technologies

Blog

Authors

Latest Posts

Support Resources

Documentation

Support

Getting Started

Other Resources

About Us

Industry events

Company

Contact

Newsletter

Legal

Sign in

Create account

Text Control Account

Lazy Loading

Post tagged with Lazy Loading in 2020

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

​

Latest Posts

​

Support

Getting Started

​

Other Resources

Company

Contact

Newsletter

Legal

Text Control Account

​

​

Lazy Loading

Post tagged with Lazy Loading in 2020 ​

September 2020

Post tagged with Lazy Loading in 2020