Angular TinyMCE contents clearing when I switch between tabs and editor stops working

Question

I have a tinymce editor inside an infragistics igniteui angular tab component. When my form 1st renders, I see the data from database properly displayed in tinymce. When I switch to another tab that also has a tinymce editor, it works and the editor on that 2nd tab is also properly displaying it's contents. If I then switch back to the 1st tab, the contents have disappeared from 1st tinymce. All the other controls on this 1st tab still show their contents. If I switch to the 2nd tab, that editor is also now empty.

In both cases, after switching tabs, the editor is no longer usable.

I've tried both loading tinymce at application startup and also lazy loading.

Answer 1

As per official documentation:

By default, the tab contents are eagerly loaded. Eagerly loaded tabs will initialize the child components but not inject them into the DOM until the tab is activated.

If the tab contains several complex child components or the tab's contents rely on DOM calculations during initialization, it is advised to lazy load the tab's content.

Tab contents can be lazy loaded by declaring the body in a ng-template with the matTabContent attribute.

Apparently, TinyMCE relies on the DOM, which gets destroyed when the tabs are switched. Just use the lazy loading of the DOM so that it doesn't get destroyed and it should work fine.

Example from the docs:

<mat-tab label="First">
  <ng-template matTabContent>
    Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}
  </ng-template>
</mat-tab>