TinyMCE with Angular Material mat-tab-group

If we try to include TinyMCE editor within one of the tabs of Angular Material <mat-tab-group>, we get into an issue where the TinyMCE content is either not displayed properly or becomes non-editable when we switch between tabs.

Why do we get into this issue?

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.

When a tab contains several complex child components or its contents rely on DOM calculations during initialization, it is always advised to lazy load the content.

So, we need to use lazy loading to resolve this issue.

Without lazy loading

The mat-tab-group tab contents are defined as below without lazy loading.

<mat-tab-group>
    <mat-tab label="First">
        Content 1
    </mat-tab>
    <mat-tab label="Second">
        Content 2
    </mat-tab>
</mat-tab-group>

With lazy loading

In order to have lazy loading, we need to include the tab content within the below element as shown.

• <ng-template matTabContent></ng-template>

<mat-tab-group>
    <mat-tab label="First">
        <ng-template matTabContent>
            Content 1
        </ng-template>
    </mat-tab>
    <mat-tab label="Second">
        <ng-template matTabContent>
            Content 2
        </ng-template>
    </mat-tab>
</mat-tab-group>

Reference

Check the below link for more details on lazy loading on Angular Material documentation.

• https://material.angular.io/components/tabs/overview#lazy-loading

Overall

Use lazy loading to overcome this issue with TinyMCE on Angular Material mat-tab-group tabs.