4

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.

Community
  • 1
  • 1
Shan-Desai
  • 3,101
  • 3
  • 46
  • 89
  • 1
    cant you save the data in localstorage or a tempVariable before you change the tab? – Hey24sheep Nov 13 '17 at 15:31
  • try using a state management technique `ngrx-store` how to setup [read it here](https://medium.com/@aravindfz/setting-up-storemodule-in-ngrx-4-0-b7c60732aa64) – Aravind Nov 13 '17 at 15:31
  • @Hey24sheep `localStorage` sounds like a good idea however canyou describe the logic of passing the data back the to child component i.e. `visData` and `language` when the tab is clicked again – Shan-Desai Nov 13 '17 at 15:34
  • assuming you could put (click)="checkData(i)" on your tab click then you could make a function in which you check if (!visData) { visData = localStorage.getItem("prevVisData"); } and get the data from localstorage if your visData is undefined. – Hey24sheep Nov 13 '17 at 15:38
  • @Hey24sheep is it possible to store a JSON in localStorage? the `visData` is a huge Recursive JSON in my case and i am not sure if `localStorage.setItem('prevVisData, this.visData)` would work – Shan-Desai Nov 13 '17 at 15:45
  • yes, only json is stored in localstorage so yes you could save it like that – Hey24sheep Nov 13 '17 at 15:48
  • also there seems to be a problem I did not address let me edit the question again – Shan-Desai Nov 13 '17 at 15:50
  • There is one more issue. visData might be an object currently so you might have to JSON.stringify or angular.toJson it when you save it and parse it when you get it – Hey24sheep Nov 13 '17 at 15:53
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158873/discussion-between-shan-desai-and-hey24sheep). – Shan-Desai Nov 13 '17 at 15:56

2 Answers2

9
<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

Brighton Vino
  • 295
  • 3
  • 10
  • This saved my day! Rendering huge data again on a single tab switch wasn't a good user experience. – Deepak Dec 17 '20 at 07:48
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.

Hey24sheep
  • 1,172
  • 6
  • 16