NgbTab reloading components on tab chage

Question

I have 2 tabs and inside the tab content there is a component i developed. When ever I move from one tab to another and come back to the tab on which my developed component is place, it reloads and calls its lifecycle methods called which causing problem for me.

Is there a way to stop reloading the component on change of the tab.

HTML code :

<ngb-tabset>
    <ngb-tab title="xyz..." id="overview">
        <ng-template ngbTabContent>
            ...
            <sd-tags [existingTags]="tags" [somethingelse]="otherstuffs" [more]="morestuff"></sd-tags>
            ...
        </ng-template>
    </ngb-tab>
    <ngb-tab [title]="sothingesele" id="columns">
        <ng-template ngbTabContent>
            ...
        </ng-template>
    </ngb-tab>
</ngb-tabset>

When tab changed, the sd-tabs component reloads and what ever is processed, it comes to initial stage and causing problem.

Answer 1

I guess you are looking for destroyOnHide input property on ngb-tabset:

<ngb-tabset [destroyOnHide]="false">
  ...
</ngb-tabset>

According to the docs

destroyOnHide

Default value: true

Whether the closed tabs should be hidden without destroying them

Plunker Example