ng-zorro-antd icon indicating copy to clipboard operation
ng-zorro-antd copied to clipboard

Destroy inactive lazy loaded nz-tab

Open vypsim opened this issue 8 months ago • 2 comments

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>

vypsim avatar Jun 21 '24 12:06 vypsim