Hello. I’m using GoJs (2.2.4) with Angular (14.0), everything was working normally while I had the Palette and Diagram in the same component. Now I had to separate Palette and Diagram into different components but in the same module. Now in another component my Palette just doesn’t render and doesn’t display any errors.
Below the code:
desenho-main.component.html
<div #myPaletteDiv >
<gojs-palette #myPalette [initPalette]='initPalette' [divClassName]='paletteDivClassName' [nodeDataArray]='paletteNodeData' [modelData]='paletteModelData'></gojs-palette>
</div>
desenho-main.component.ts
import { DesenhoPlanta } from '../DesenhoPlanta';
import { ChangeDetectorRef, Component, ViewChild, ViewEncapsulation, OnInit, ElementRef, AfterViewInit, Input, HostListener } from '@angular/core';
import * as go from 'gojs';
import { DataSyncService, DiagramComponent, PaletteComponent } from 'gojs-angular';
import produce from "immer";
import { DynamicDialogConfig, DynamicDialogRef, DialogService} from 'primeng/dynamicdialog';
import { AppComponent } from 'src/app/app.component';
import { ColetorComponent } from 'src/app/cadastro/coletor/coletor.component';
import { Diagrama } from '../Diagrama';
const $ = go.GraphObject.make;
@Component({
selector: 'app-desenho-main',
templateUrl: './desenho-main.component.html',
styleUrls: ['./desenho-main.component.css']
})
export class DesenhoMainComponent implements AfterViewInit, OnInit {
tipoPalette: any;
paletteNodeData: any = [];
paletteModelData: any;
@ViewChild('myPalette', { static: true }) public myPaletteComponent!: PaletteComponent;
@ViewChild('myPaletteDiv', { static: true }) public paletteDiv: ElementRef;
public paletteDivClassName: string = 'myPaletteCSS';
constructor(private cdr: ChangeDetectorRef ) {
}
ngOnInit(): void {
}
public ngAfterViewInit() {
this.fillPalette();
// IMPORTANT: without this, Angular will throw ExpressionChangedAfterItHasBeenCheckedError (dev mode only)
this.cdr.detectChanges();
} // end ngAfterViewInit
public initPalette(): go.Palette {
const myPalette = new go.Palette();
myPalette.nodeTemplate =
$(go.Node, "Horizontal",
$(go.Picture, { margin: 5, width: 60, height: 60 },
new go.Binding('source').makeTwoWay()
),
$(go.TextBlock,
new go.Binding("text", "key"))
);
return myPalette;
}
fillPalette() {
this.paletteNodeData.push({key: 'Unidade', category: "unidade", text: 'Unidade', source: `assets/unidade.svg`});
this.paletteNodeData.push({key: 'Grupo Alt', category: "ga", text: 'Grupo Alt', source: `assets/ga.svg`});
}
}
