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

user_4851126 0
Viewed 4051

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

enter image description here

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

enter image description here

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.

gojs ng-bootstrap angular typescript
2 Answers

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.

user_54391090
Related