Overview component diagram disappears

GoJS
1

In the gojs-angular basic sample add a flag to show/hide the component:


<div class="left" *ngIf="showOverview">
  Overview
  <gojs-overview #myOverview [initOverview]='initOverview' [divClassName]='oDivClassName' [observedDiagram]='observedDiagram'></gojs-overview>
</div>
  <button value="overview" type="button" (click)="showOverview = !showOverview">overview</button>

After the button is clicked to hide the overview, click again. The oveview is there but it shows no diagram.

2

Investigating…

3

Wow this one was tricky. Seems like *ngIf virtually “removes” the OverviewComponent, so when you toggle it off, then back on, the underlying Overview.observed property is lost.

Solution 1: Don’t use *ngIf.

Just toggle some CSS class that will style your element with display: none. I like this solution since it’s easy and doesn’t force you to get in the weeds with Angular’s pickiness, which changes from version to version.

Solution 2: Keep using *ngIf.

This requires a special @ViewChild setter for your OverviewComponent. Basically, every time *ngIf is evaluated, if the component is added back to the DOM with content, we re-establish the observed property of the OverviewComponent.overview. See below

@ViewChild('myOverview') set content(content: OverviewComponent) {
    if(content) { // initially setter gets called with undefined
        this.myOverviewComponent = content;
        let overview = this.myOverviewComponent.overview;
        overview.observed = this.myDiagramComponent.diagram;
        overview.requestUpdate();
    }
 }
4

sorry for the late reply, got caught up with other things

yes, you are right Solution 1 sounds easier and it works.

Thank you