How to move projected content of a component into different place in DOM upon projection like...

In Angular Material there is a component MatTab and we use it like this:

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


But upon inspecting elements that were created in the DOM the element <mat-tab> is not present and projected content is moved in <mat-tab-body>.

I want to move the projected content somewhere else and delete the element in which the content was projected into at the beginning. How can I achieve this behavior?

Continue reading...