Invalid DIV id - switch between tabs in Angular

GoJS
1

I need to switch between types of Devices Tab and using mat-tab-group function in angular, but upon moving to next tab, am getting invalid div ID… And as per references need to load the nodes after initialization of diagram and node templates… So updated the service function loadUsers() to run at the end of all diagram init… But am getting the below error and not able to view the first tab diagrams as well.

 this.gc_diagram = $(go.Diagram, "GroupConfDiv",
      {
        allowVerticalScroll: false,
        allowHorizontalScroll: false,
        allowMove: false,
        allowDelete: false,
        allowCopy: false,
        allowDragOut: false,
        layout:
          $(go.GridLayout, { sorting: go.GridLayout.Forward }), // use a GridLayout
        padding: new go.Margin(5, 5, 25, 5) // to see the names of shapes on the bottom row
      });
    this.gc_diagram.nodeTemplate = this.fc_diagram.nodeTemplate;
    // this.gc_diagram.model.nodeDataArray

    this.gc_diagram.requestUpdate();
    this.load_users()

logger.service.ts:10 ERROR: Error: Invalid DIV id; could not get element with id: GroupConfDiv
at C (go-module.js:13:71)
at ni (go-module.js:806:284)
at Hl (go-module.js:929:66)
at ResourcePlanningViewDiagramComponent.ngAfterViewInit (resource-planning-view-diagram.component.ts:249:23)
at callHook (core.mjs:2542:22)
at callHooks (core.mjs:2511:17)
at executeInitAndCheckHooks (core.mjs:2462:9)
at refreshView (core.mjs:9555:21)
at refreshEmbeddedViews (core.mjs:10609:17)
at refreshView (core.mjs:9508:9)

2

Just a guess – don’t pass the DIV to the Diagram by name but by reference.

3

Updated with reference and got the same error, but while going through one of the forum reply am not getting the error and able to see the logs and nodeData… Here am missing out to view the diagram in UI… its empty. Updated code is as below… Not able to see the GroupDiv background at all…looks like hidden div…
Or missing out to call some reference… am not sure

 @ViewChild('GroupDiv', { static: true }) group_diagramDiv: ElementRef;
  gc_diagram: go.Diagram; //GoJS Diagram for GroupConf on TOP

//inside ngAfterViewInIt method
this.gc_diagram = $(go.Diagram,
      {
        allowVerticalScroll: false,
        allowHorizontalScroll: false,
        allowMove: false,
        allowDelete: false,
        allowCopy: false,
        allowDragOut: false,
        layout:
          $(go.GridLayout, { sorting: go.GridLayout.Forward }),
        padding: new go.Margin(5, 5, 25, 5)
      });
    this.gc_diagram.div = this.group_diagramDiv.nativeElement;

    this.gc_diagram.nodeTemplate = this.fc_diagram.nodeTemplate;
      //console.log(this.nodes3);
      this.gc_diagram.model = new go.TreeModel({ nodeDataArray: this.nodes3 });
    });
    // debugger;
    // console.log(this.gc_diagram.model.nodeDataArray)

    this.gc_diagram.requestUpdate();
    this.load_users()
}

 onWindowResize() {
      this.gc_diagram.requestUpdate();   
  }
//--------------------- @ HTML --------------
<mat-tab label="GC"  style="color: white;">
      <div class="container">
      <div #GroupDiv (window:resize)="onWindowResize()" ></div>   
      </div>
    </mat-tab>
4

What are the dimensions of that #GroupDiv ?

5

Yes… that’s great…

#GroupDiv {
  /* display: flex; */
  width: 95%;
  height: 300px;
  border: 1px solid yellowgreen;
  opacity: 0.8;
  /* justify-content: center;  */
  /* align-items: center;  */
}```
I missed out to add the css part and should be fine..
Thanks, for the update.