# Using Text Control in Angular Routes
> This article describes how to use TX Text Control for Angular in routes by removing the previously connected singleton instance from the DOM explicitly.
- **Author:** Bjoern Meyer
- **Published:** 2020-03-30
- **Modified:** 2026-07-17
- **Description:** This article describes how to use TX Text Control for Angular in routes by removing the previously connected singleton instance from the DOM explicitly.
- **2 min read** (299 words)
- **Tags:**
- Angular
- ASP.NET
- JavaScript
- **Web URL:** https://www.textcontrol.com/blog/2020/03/30/using-text-control-in-angular-routes/
- **LLMs URL:** https://www.textcontrol.com/blog/2020/03/30/using-text-control-in-angular-routes/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2020/03/30/using-text-control-in-angular-routes/llms-full.txt
- **GitHub Repository:** https://github.com/TextControl/TextControl.Web.Angular.Routes
---
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:
```
Main View
```
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.
---
## About Bjoern Meyer
As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano.
- [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/)
- [X](https://x.com/txbjoern)
- [GitHub](https://github.com/bjoerntx)
---
## Related Posts
- [Using the Document Editor in SPA Applications using the removeFromDom Method](https://www.textcontrol.com/blog/2024/09/02/using-the-document-editor-in-spa-applications-using-the-removefromdom-method/llms.txt)
- [Observe When the Reporting Preview Tab is Active Using MutationObserver](https://www.textcontrol.com/blog/2024/07/23/observe-when-the-reporting-preview-tab-is-active-using-mutationobserver/llms.txt)
- [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt)
- [Reuse Angular Document Editor Instances in Bootstrap Tabs](https://www.textcontrol.com/blog/2023/05/22/reuse-angular-document-editor-instances-in-bootstrap-tabs/llms.txt)
- [JavaScript: Avoid Flickering and Visual Updates by Grouping Undo Steps](https://www.textcontrol.com/blog/2022/07/25/javascript-avoid-flickering-and-visual-updates-by-grouping-undo-steps/llms.txt)
- [TX Text Control Document Editor Deployment Strategies](https://www.textcontrol.com/blog/2021/08/10/document-editor-deployment-strategies/llms.txt)
- [Track Changes: Show 'Original' and 'No Markup'](https://www.textcontrol.com/blog/2021/02/18/track-changes-show-original-and-no-markup/llms.txt)
- [Using the Document Viewer in Angular Routes](https://www.textcontrol.com/blog/2021/01/14/using-document-viewer-in-angular-routes/llms.txt)
- [JavaScript Functions for Typical Form Field Tasks](https://www.textcontrol.com/blog/2020/04/15/javascript-functions-for-typical-form-field-tasks/llms.txt)
- [New JavaScript API: Working with Callbacks and Promises](https://www.textcontrol.com/blog/2020/03/26/working-with-callbacks-and-promises/llms.txt)
- [TXTextControl.Web: Creating a Custom ButtonBar using the InputFormat Class](https://www.textcontrol.com/blog/2020/03/20/creating-a-custom-buttonbar-using-the-inputformat-class/llms.txt)
- [New JavaScript API Calls for Typical MailMerge Tasks](https://www.textcontrol.com/blog/2020/03/19/new-javascript-api-for-typical-mailmerge-tasks/llms.txt)
- [Build a Custom Backstage View in ASP.NET Core with TX Text Control](https://www.textcontrol.com/blog/2026/02/17/build-a-custom-backstage-view-in-aspnet-core-with-tx-text-control/llms.txt)
- [5 Document Workflows You Can Automate With JavaScript Rich Text Editor](https://www.textcontrol.com/blog/2026/01/14/five-document-workflows-you-can-automate-with-javascript-rich-text-editor/llms.txt)
- [Add JavaScript to PDFs with TX Text Control in C# .NET: Time-Based Alerts Made Easy](https://www.textcontrol.com/blog/2025/06/13/add-javascript-to-pdfs-with-tx-text-control-in-c-dot-net-time-based-alerts-made-easy/llms.txt)
- [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt)
- [Getting Started: Document Viewer Version 33.0 with Angular CLI 19.0](https://www.textcontrol.com/blog/2025/03/18/getting-started-document-viewer-version-33-0-with-angular-cli-19-0/llms.txt)
- [Getting Started: Document Editor Version 33.0 with Angular CLI 19.0](https://www.textcontrol.com/blog/2025/03/18/getting-started-document-editor-version-33-0-with-angular-cli-19-0/llms.txt)
- [Impressions from .NET Developer Conference DDC 2024](https://www.textcontrol.com/blog/2024/11/28/impressions-from-net-developer-conference-ddc-2024/llms.txt)
- [Back from Florida: Impressions from VSLive! Orlando 2024](https://www.textcontrol.com/blog/2024/11/21/back-from-florida-impressions-from-vslive-orlando-2024/llms.txt)
- [Getting Started: Document Viewer with Angular CLI v18.0](https://www.textcontrol.com/blog/2024/11/15/getting-started-document-viewer-with-angular-cli-v18-0/llms.txt)
- [Implementing a Security Middleware for Angular Document Editor Applications in C#](https://www.textcontrol.com/blog/2024/10/14/implementing-a-security-middleware-for-angular-document-editor-applications/llms.txt)
- [Meet Text Control at DDC .NET Developer Conference 2024](https://www.textcontrol.com/blog/2024/10/07/meet-text-control-at-ddc-net-developer-conference-2024/llms.txt)
- [Visit Text Control at VSLive! in Orlando, Florida](https://www.textcontrol.com/blog/2024/10/01/visit-tx-text-control-at-vslive-in-orlando-florida/llms.txt)
- [Creating Advanced Tables in PDF and DOCX Documents with C#](https://www.textcontrol.com/blog/2024/09/30/creating-advanced-tables-in-pdf-and-docx-documents-with-csharp/llms.txt)