TX Text Control for Angular is created as a singleton instance on a page. Therefore, the complete control must be removed explicitly from the DOM 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)="removeEditor()" routerLink="/textcontrol" routerLinkActive="active">
    Document Editor
  </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.

The problem with TX Text Control in this case is, that the complete instance including connected JavaScript events is still available in the DOM and must be explicitly removed. In the above code, the (click) event is used to call the removeEditor method.

This method is declared in app.component.ts:

import { Component } from '@angular/core';
declare const removeEditorFromDom: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'TXTestApp';

  removeEditor() {
    removeEditorFromDom();
  }

}

removeEditor calls the JavaScript function removeEditorFromDom which internally calls the removeFromDom method that closes the WebSocket connection gracefully and removes the whole editor from the DOM.

function removeEditorFromDom()
{
    TXTextControl.removeFromDom();
}

This way, a new partial view can be loaded and reused including a Text Control editor with a new and safe connection to the WebSocketHandler.