How to preserve previous ngbTab content when switching between tabs in ng-bootstrap Angular 2 typescript

Question

I have a UI where I am using ngb-tabset and ngb-tab to render the following:

The user enters something above in the form and obtains a graphical visualization under Graph Navigation Tab as follows:

The user could now click on Semantic Query tab and obtain information from the child component.

However when the user clicks back on the Graph Navigation tab I get the following error:

 myDiagram is undefined

where myDiagram is a go.Diagram instance which gets information from the parent component and renders the diagram.(GoJS)

Code

parent.component.html

<ngb-tabset>
    <ngb-tab title="Graph Navigation">
        <template ngbTabContent>
        <explore-search-details [config]="visData" [lang]="language"></explore-search-details>
        </template>
    </ngb-tab>
    <ngb-tab title="Semantic Query">
        <template ngbTabContent>
            <explore-search-semantic></explore-search-semantic>
        </template>
    </ngb-tab>

</ngb-tabset>

• explore-search-details is a child component which takes visData and language as input variables from the parent component.

• within the explore-search-details.component.html there is a div as follows which takes care of rendering

    <div #myDiagramDiv></div>
  

Versions

angular 2.4.0, ng-bootstrap 1.0.0-alpha.21

Edit

there was a mistake in my addressing myDiagram is a go.Diagram type variable which is used within ngOnChanges() and ngAfterViewInit() lifecycle hook which goes undefined after the tab is switched back.

Answer 1

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

The default value is true which renders the content every time you switch tabs. Reference: https://ng-bootstrap.github.io/#/components/tabs/api

Answer 2

For the first issue, Try to use LocalStorage to preserve tab states.

there was a mistake in my addressing myDiagram is a go.Diagram type variable which is used within ngOnChanges() and ngAfterViewInit() lifecycle hook which goes undefined after the tab is switched back.

Try putting your reInit code in setTimeout, so you set up your dom elem in the next cycle instead of the current one.