Palette does not render

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:


<div #myPaletteDiv >
  <gojs-palette  #myPalette [initPalette]='initPalette' [divClassName]='paletteDivClassName' [nodeDataArray]='paletteNodeData'  [modelData]='paletteModelData'></gojs-palette>


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;

  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() {

	  // IMPORTANT: without this, Angular will throw ExpressionChangedAfterItHasBeenCheckedError (dev mode only)

  } // 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()
		  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`});


Are you sure it doesn’t initialize? Try setting breakpoints in each function to see what is called and what isn’t called.

So, the initPalette() method returns this object below, without errors. Everything runs normally, but nothing is displayed.

actually initPalette() returns the palette property of the object above

Is the Div in the DOM?

Oops…thanks! I found the error with your tip. Missed putting this in .ts

encapsulation: ViewEncapsulation.ShadowDom

  selector: 'app-desenho-main',
  templateUrl: './desenho-main.component.html',
  styleUrls: ['./desenho-main.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom

Sorry, I solved the GoJS problem, but when putting ShadowDom other libraries stop working (like PrimeNG and tailwind). Any suggestion?

I finally managed to solve everything. I had to include the css of the other libraries directly in the component:

10 @Component({               
 11   selector: 'app-desenho-main',
 12   templateUrl: './desenho-main.component.html',
 13   styleUrls: ['./desenho-main.component.css',
 14               "../../../../node_modules/primeng/resources/themes/mdc-light-indigo/theme.css",
 15               "../../../../node_modules/primeng/resources/primeng.min.css",
 16               "../../../../node_modules/primeflex/primeflex.css",
 17               "../../../../node_modules/primeicons/primeicons.css",
 18               "../../../../node_modules/tailwindcss/screens.css",
 19               "../../../../node_modules/tailwindcss/tailwind.css",
 20               "../../../../node_modules/tailwindcss/utilities.css",
 21               "../../../../node_modules/tailwindcss/variants.css",
 22   ],    
 23   encapsulation: ViewEncapsulation.ShadowDom
 24 })