bug(mat-tabs): When clicking to another tab prev tab content is destroyed without calling a components onDestroy

[cbaskins]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

If you have a component in a mat-tab as content when that tab is no longer in focused the body is removed but the components onDestroy method is not called. You can observe the content is removed in the dom and https://material.angular.io/components/tabs/overview#keeping-the-tab-content-inside-the-dom-while-its-off-screen supports this notion but I was expecting a components onDestroy method to be called when removed for cleanup purposes (resizeObservers et el)

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-vntmid?file=src%2Fmain.ts Steps to reproduce:

1. Click on any tab.
2. Observe console log not called from the tab one component

Expected Behavior

Console log called indicating the onDestroy method fired.

Actual Behavior

NA

Environment

Angular CLI: 18.0.1 Node: 18.20.3 Package Manager: npm 10.2.3 OS: linux x64

Angular: 18.0.0 ... animations, cdk, common, compiler, compiler-cli, core, forms ... material, platform-browser, router

Package Version

@angular-devkit/architect 0.1800.1 @angular-devkit/build-angular 18.0.1 @angular-devkit/core 18.0.1 @angular-devkit/schematics 18.0.1 @angular/cli 18.0.1 @schematics/angular 18.0.1 rxjs 7.8.1 typescript 5.4.5 zone.js 0.14.6

[hakimio]

Wrap your tab-one component with <ng-template matTabContent> and it will work as expected:

<mat-tab label="Second">
  <ng-template matTabContent>
      <app-tab-one/>
  </ng-template>
</mat-tab>

This is not a bug. The component in your example is not destroyed when switching the tabs.

[cbaskins]

Indeed it does. I kinda expected the component to be destroyed when the tab content is removed from the DOM without the ng template and directive. Maybe a documentation note? Thank you! @hakimio

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}