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:

Loading...

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

Loading...

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:

Loading...

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.

Loading...

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.