I have an angular application which contains one very simple component for a wysiwyg editor:
component.html
<textarea [id]="editorId"></textarea>
component.ts
editorId: string;
constructor() {
this.editorId = Math.random().toString(36).substring(2, 15);
}
ngAfterViewInit(){
// @ts-ignore
editorLibrary.init(this.editorId);
}
I use a javascript library which I simplified in this example to editorLibrary which is a global js-variable on which I can do things like initialize an editor. I need the ts-ignore because I don't import it just in this component.
This all works great except that after I initialized the editor the rendering suddenly becomes extremly slow. When I change a value other components are only re-rendered after a few seconds where the change was instant before.
My theory for the reason is that the wysiwyg-editor-library generates a second html-element next to my textarea which has tons of sub-elements and I think angular parses all these when a change happens which slows it down.
Is there any way to tell angular to completetly ignore the elements generated by the editor? Since it is all vanilla-js I don't need any changeDetection or variable replacements and I think my performance would increase if angular would simply ignore these elements completetly. I already tried changeDetectorRef.detach() and zone.runOutsideAngular() and attempted to add the element with elementRef instead of having it directly in my html-file. The rendering is still really slow.
The ui does not lag however but the updates from angular after changing a variable simply take a loooot of time. Is there any other way to debug the reason for this? (maybe advanced log levels where I can see what angular is doing in the background) Or does anyone have an idea how I can tell angular "this html is pure js, you don't need to look at it, parse it, change it or even know it's there"