Destroy inactive lazy loaded nz-tab

[vypsim]

What problem does this feature solve?

The behavior of nz-tab has changed in sync ant-design v4.23.6 PR

Previously, when a lazy-loaded tab is inactive, then its content is destroyed. This has been changed as shown in the link above to keep the content rendered even if the tab is inactive.

This has been a breaking change for some components in our app that were relying on ngOnInit logic executed when the tab is activated for example.

But more importantly, we have some tabs that have active websocket subscriptions that can be resource intensive and ideally they shouldn't be polling data or keeping that subscription to the backend active when their content is not visible.

Can you please provide a suitable replacement for the old behavior.

What does the proposed API look like?

<nz-tabset>
  <nz-tab nzTitle="Lazy loaded persistent tab">
    <ng-template nz-tab>
      <app-child-component></app-child-component>
    </ng-template>
  </nz-tab>
  <nz-tab nzTitle="Lazy loaded ephemeral tab">
    <ng-template nz-tab let-active>
    @if (active) {
      <app-data-polling-component></app-data-polling-component>
    }
    </ng-template>
  </nz-tab>
</nz-tabset>

OR

<nz-tabset>
  <nz-tab nzTitle="Lazy loaded persistent tab">
    <ng-template nz-tab>
      <app-child-component></app-child-component>
    </ng-template>
  </nz-tab>
  <nz-tab nzTitle="Lazy loaded ephemeral tab">
    <ng-template nz-tab [nzDestroyOnClose]="true">
      <app-data-polling-component></app-data-polling-component>
    </ng-template>
  </nz-tab>
</nz-tabset>

[rasiaq]

Same here – we also have components relying on ngOnInit logic which is broken right now.

In addition, the components that are in the tabs are tables with many records and we introduced lazy loading for performance reasons, precisely so that the content of all the tabs is not in the DOM at the same time