The DocumentViewer for Angular is created as a singleton instance on a page. Therefore, the complete control must be re-initialized explicitly when loading a partial view a second time. In Angular, "partial views" are implemented through routes. In this sample, two routes are implemented:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { TextControlComponent } from './textcontrol/textcontrol.component';


const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'textcontrol', component: TextControlComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

The component home and textcontrol are navigated through links on the main app page:

<h1>Main View</h1>

<nav>
  <a routerLink="/home" routerLinkActive="active">Home</a>
  <br>
  <a (click)="initializeViewer()" routerLink="/textcontrol" routerLinkActive="active">
    Document Viewer
  </a>
</nav>

<router-outlet></router-outlet>

Due to the nature of Angular routes, the page is not reloaded when clicking on the navigation links, but a partial views is loaded dynamically into the DOM.

In this case, the DocumentViewer instance needs to be initialized explicitly by calling the init method. In the above code, the (click) event is used to call the initializeViewer method.

function initializeViewer()
{
    TXDocumentViewer.init(
        { containerID: "txViewer", viewerSettings: {
            signatureSettings: {
                "ownerName":"",
                "signatureBoxName":"txsign",
                "signerName":"",
                "signerInitials":"",
                "showSignatureBar":false,
                "uniqueId":"",
                "redirectUrlAfterSignature":""
            },
            userNames: [],
            dock: 1,
            documentData: "SGVsbG8gdGhlcmU=",
            documentPath: "test.docx",
            toolbarDocked: true,
            isSelectionActivated: true,
            showThumbnailPane: true,
            resources: null,
            basePath: "https://backend.textcontrol.com"
            }
        }
    );
}

This way, a new partial view can be loaded and reused including the DocumentViewer.