Angular Dynamic CSS Library by BPNM

I'm currently working with the Bpmn library to create a diagram.

However, I've encountered an issue where I need to hide the palette in the diagram view dynamically. I attempted to achieve this by using @ViewChild in my TypeScript file to target the element and apply CSS styles 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');
            }
        }

}

The issue lies in the fact that the element 'djs-palette-entries' is generated by the BPMN library and is not visible in the HTML structure...

Unfortunately, the code is not functioning as expected. What would be the most effective approach to dynamically hide this element?

I tried using @ViewChild but the element remains visible.

angularangularjstypescriptbpmn.iobpmn-js

Answer №1

In case the element is dynamically inserted by a third-party library, you can easily access it as a DOM element within the component by querying it and assigning it to the variable this.actionsPalette during the ngAfterViewInit lifecycle hook. Afterwards, you can toggle its visibility using the following method:

constructor(
  private el: ElementRef
) {}

ngAfterViewInit() {
  this.actionsPalette = this.el.nativeElement.querySelector('.djs-palette-entries');
  console.log('actionsPalette', this.actionsPalette);
}

togglePalette() {

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover the power of AngularJS's ng-route feature for creating a dynamic and seamless one-page HTML template experience

I'm attempting to create a dynamic header using ng-repeat. Here's the initial code: <ul class="right"> <li><a href="#carousel">Home</a></li> <li><a href="#about-us">About Us</a></li> &l ...

javascripthtmlangularjs

Creating a JavaScript library with TypeScript and Laravel Mix in Laravel

I have a Typescript function that I've developed and would like to package it as a library. To transpile the .ts files into .js files, I am using Laravel Mix and babel ts loader. However, despite finding the file, I am unable to use the functions: ...

javascriptlaraveltypescript

Controller binding is not possible without the directive 'tabset' and its controller

I'm brand new to angular, and I've hit a roadblock with directive communication. Specifically, I'm getting the error message Cannot bind to controller without directive 'tabset's controller. Here is my Code HTML code <tabset ...

angularjs

Guide on including the angular value (id) in conjunction with repeating data-target for executing a function

I have the following code snippet. Now, I am trying to pass a dynamic AngularJS variable, specifically the id of a repeating list. The button in question is used for deactivation purposes, and upon clicking it, a confirmation box pops up. Upon confirming ...

javascriptangularjsmodeltarget

Creating a versatile protractor framework to streamline multiple project implementations

There's a concept in the works for creating a 'protractor core' that will be utilized by various projects for UI testing. Currently, I have an Angular project called 'project1' with e2e tests (cucumber-protractor-typescript) that c ...

angularjstypescriptprotractorcucumber

Turn off the background graphic in chartjs

Greetings all! I'm currently facing an issue with removing the hashtag background of a line chart. Is there any method to disable or remove it? I am utilizing chartjs in my Ionic 2 app. Your assistance is greatly appreciated. Below is the code for my ...

angularbackgroundionic2chart.jslinechart

ERROR TS1086: A declaration of an accessor within an ambient context is not allowed. Accessor for firebaseUiConfig(): NativeFirebaseUIAuthConfig

Trying to create a Single Page Application with Angular/CLI 8. Everything was running smoothly locally until I tried to add Firebase authentication to the app. Upon compiling through Visual Studio Code, I encountered the following error message: ERROR in ...

angulartypescriptfirebase-authenticationfirebaseui

Presenting information using mat-table in Angular 2

Everything seems to be working fine with the code as I am able to display the data in mat-cards successfully. However, when I try to display it in mat-tables, I encounter index errors. I have made sure to import matTableDataSource, DataSource, CdkTableModu ...

angulartypescript

Issue with implementing JQuery datepicker within Angular 7 CLI application

I've been working on my application and trying to implement the jQuery datepicker functionality. It's an Angular CLI app, and I have installed jquery-datepicker and jquery using npm. Here is a snippet of the dependencies in my package.json: "@a ...

jqueryangularjquery-plugins

Arrange two input fields side by side if the quantity of input fields is unspecified

I am currently in the process of developing a project using Angular. I have implemented an *ngFor loop to dynamically add input fields based on the data retrieved from the backend. Is there a way I can ensure that two input fields are displayed on the same ...

htmlcssangular

Customize cell color in angularjs and ui-grid

In my ui-grid, I have two columns - firstName and lastName. The background color of the firstName column is set to blue. When I click on the header of the lastName column, I want to change the background color of the lastName column to blue and return the ...

angularjsui-grid

Toggle checkbox feature in Bootstrap not functioning properly when placed within ng-view

When attempting to embed a bootstrap toggle checkbox within <ng-view></ng-view>, an issue arises where a regular HTML checkbox is displayed instead of the expected bootstrap toggle. Strangely, the same checkbox functions as a bootstrap toggle w ...

javascripthtmlcssangularjstwitter-bootstrap

TS1261: The file name 'xxx' that is already included is different from the file name 'xxx' only in terms of casing

In my project, there is a file located at /app/client/modules/activity/pages/New/hooks.ts. The folder name is New, with the first letter capitalized. During the webpack build process, I encountered the following error: ERROR in /root/app/client/modules/ac ...

typescriptmacos

The potential object null may lead to an absence of the 'value' property in the type 'EventTarget'

I am facing a problem that I am unable to resolve. The error in my HTML reads: Object is possibly 'null' and Property 'value' does not exist on type 'EventTarget'. HTML <select [(ngModel)]="selectedProvincia" (ch ...

angulartypescript

Fixed headers remain in place as you scroll horizontally on a single table

Within my system, I have organized two tables: table one and table 2 are stacked on top of each other. I've managed to freeze the column headers so that they are displayed vertically, remaining static as users scroll horizontally. To achieve this effe ...

htmlcssangular

Using AngularJS: Passing input parameters through the URL using ui-router

While browsing through this particular question, I became interested in making a modification. My goal is to have the input entered into the 'home' field display in the 'other' field. I attempted to link the input using {{name}}, but I ...

angularjsangular-ui-router

managing hashbang URLs using ng-route

When navigating using location.path, I use the following code: $location.path('#/foo'); Within my app, I implement route provider as shown below: var app = angular.module("myApp", ['ngRoute']) .config(function($routeProvider){ ...

angularjsangularjs-ng-route

Can a website be developed using the Ionic framework for web applications?

Can Ionic be used to create web applications or is it strictly for mobile development? How does Angular differ from Ionic? ...

angularjsweb-applicationsionic-frameworkmobile-application

Angular error message: Trying to access the property 'name' of an undefined object leads to a TypeError

I'm having trouble phrasing this question differently, but I am seeking assistance in comprehending how to address this issue. The error message I am encountering is as follows: TypeError: _co.create is not a function TypeError: Cannot read property ...

htmlangulartypescript

Using JQuery to extract the unique identifiers of nodes within a tree view format for the purpose of storing data according to these identifiers

Using Angular to display data in the view, I have a sample code here. When a specific age group category is clicked, I want to populate a form with data and save the entire dataset, including the parent node IDs. I am facing an issue with fetching the pa ...

javascriptjqueryangularjshtmldom