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 { }
view raw angular.js hosted with ❤ by GitHub

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>
view raw test.html hosted with ❤ by GitHub

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();
}
}
view raw more.ts hosted with ❤ by GitHub

removeEditor calls the JavaScript function removeEditorFromDom which internally calls the removeFromDom ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TXTextControl Object
╰ removeFromDom Method
Closes the WebSocket connection gracefully and removes the whole editor from the DOM. method that closes the WebSocket connection gracefully and removes the whole editor from the DOM.

function removeEditorFromDom()
{
TXTextControl.removeFromDom();
}
view raw test.js hosted with ❤ by GitHub

Text Control Angular Title

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.