BPNM Library Angular dynamic CSS

I'm using the BPMN library for a diagram.

I need to hide this palette on the diagram view, so in the TypeScript file, I put a @ViewChild for that element and tried to add css dynamically to hide it.

@ViewChild('djs-palette-entries') actionsPalette: ElementRef<HTMLDivElement>

togglePalette(){

const paletteEntries = this.actionsPalette.nativeElement

if (paletteEntries) {
if (this.showPaletteEntries) {
this.renderer.setStyle(paletteEntries, 'display', 'block');
} else {
this.renderer.setStyle(paletteEntries, 'display', 'none');
}
}

}


It happens that this element 'djs-palette-entries' is generated from the BPMN library and not visible in the HTML.

The code is not working, how could I hide this element dynamically, what would be the best approach?

Tried @ViewChild and expected it to be hidden.

Continue reading...