When using primeng, it is necessary to place the hyphen on the parent node when selecting a child element

https://i.sstatic.net/KM8Fo.png

This code is written in Typescript. //DECLARATIONS AND CODE

Ngonint-->

  ngOnInit() {
        if(this.title === "Create"){
        this.dataProfilo = {}
        this.dataProfilo.function = [];
        this.service.getTree().subscribe(
          (res) => {
            this.node= res.nodeTree;
          },
        )
        }else{
        this.dataProfilo={...this.profilo};
        this.service.getProfiloById(this.profilo.id).subscribe(
          (res) =>{
            if(res && res.nodeTree.length >0){
            this.node= res.nodeTree;
            res.nodeTree.forEach(elem => {
              this.checkSelectionNode(elem);
    
            });

      if(res && res.nodeTree.length >0){
              this.node= res.nodeTree;
              res.nodeTree.forEach(elem => {
                this.uncheckSelectionNode(elem);
              });
            }
          }
          },
          (error)=> {
          });
        }  
    }
   

Check if nodes are selected

  checkSelectionNode(node) {
        if (node.data.flag) {
          this.selectedFile.push(node);
        }
        if (node && node.children && node.children.length > 0) {
          node.children.forEach(childNode => {
            this.checkSelectionNode(childNode);
          }
          );
        }
      }
**If nodes are unchecked**

 uncheckSelectionNode(node) {
    if (node.data.flag == false) {
      this.unselectedFile.push(node);
    }
    if (node && node.children && node.children.length > 0) {
      node.children.forEach(childNode => {
        this.uncheckSelectionNode(childNode);
      }
      );
    }
  }

If nodes are selected - both father and child-------------------

  nodeSelect(event){
        if(event.node.children && event.node.children.length > 0){
          event.node.children.forEach(element => {
            const functionFK = this.checkChildrenNode(element);
            if(functionFK){
              let checkNodeExist = false;
              this.dataProfilo.function.forEach(element => {
                  if(element === functionFK){
                    checkNodeExist = true;
                  }
              });
              if(!checkNodeExist){
                this.dataProfilo.function.push(functionFK);
              }
            }
      });
    } else {
      if(event.node.data.functionFK){
        let checkNodeExist = false;
        this.dataProfilo.function.forEach(element => {
          if(element === event.node.data.functionFK){
            checkNodeExist = true;
          }
     });
      if(!checkNodeExist){
        this.dataProfilo.function.push(event.node.data.functionFK);
      }
      }
    }
  }

   **OTHER METHOD!**

   nodeUnselect(event) {
        const nodes = [];
        if (event.node.children && event.node.children.length > 0) {
          event.node.children.forEach(element => {
            const functionFK = this.checkChildrenNode(element);
            if (functionFK) {
              nodes.push(functionFK);
            }
          });
    
      this.dataProfilo.function = this.dataProfilo.function.filter(val => !nodes.includes(val));
    
    } else {
      if (event.node.data.functionFK) {
        this.dataProfilo.function = this.dataProfilo.function.filter(
          elem => {
            return elem != event.node.data.functionFK
          }
        );
      }
    }
    
      }
    
      
*if children are checked - BOTH FATHER AND CHILDREN
  • If nodes and children exist and the length of the node is longer than 0, I iterate through them to see if they are checked
checkChildrenNode(node): any {
        if (node && node.children && node.children.length > 0) {
          node.children.forEach(childNode => {
            this.checkChildrenNode(childNode);
          });
        } else {
          return node.data.functionFK;
        }
      }

  changeAssegnate(event:any) {
    if(event.checked){
      this.toggle = 'assegnate';
    }else{
      this.toggle = null;
    }
      console.log(event)

  }      
    }

This is my code. I'm using primeng with Angular. Any thoughts?

Answer №1

It is a common occurrence if you refer to the tree documentation provided by primeng, which can be found here

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

How can we implement `injectReducer` in Redux with TypeScript?

I have been working on a TypeScript React application with Redux to manage state. To dynamically add reducers, Redux suggested implementing an injectReducer function. In a JavaScript project, I successfully implemented this function. However, I am strugg ...

Guide to creating a unit test for canActivate guard in Angular routing

Seeking guidance on writing a unit test for angular routing with the canActivate guard. Encountering an error when using the guard on routes, but no error is thrown without it. Would appreciate a suitable example along with an explanation. app-routing.mod ...

Guide on effectively converting a table of tuples to an array of objects utility function (similar to zip) while preventing the merging of all values in typescript version 5.2.2

Almost there, but stuck on the final TS2322: Type TcolTuple[i] is not assignable to type string | number | symbol compiler error. Here's a nifty utility function called rowsToObjects() that many developers have probably come up with at some point, ...

Utilize Angular 4 to dynamically load templates within a single component

My task is to create a component with multiple HTML templates, each containing at least 20 controls. Depending on certain conditions, a specific template should be loaded. Note: I have opted for 3 different templates because the controls vary based on the ...

Configuring the date picker in Bootstrap to display one day before the actual date selection in a reactive form using Angular 8

After successfully saving the date using the Bootstrap date picker in a reactive form, I encountered a problem where the date displayed on the UI is always one day behind the actual date. Custom CODE: this.subjectPersonalform = this.formBuilder.group({d ...

What is the process for incorporating a custom action in TestCafe with TypeScript?

I've encountered an issue while trying to implement a custom action. When running tests with the new custom action, I keep receiving an error stating that my custom action is not recognized as a function. TypeError: testcafe_1.t.customActions.selectFr ...

Streamline imports with Typescript

Is there a way to import modules with an alias? For example, I have an angular service in the folder common/services/logger/logger.ts. How can I make the import look like import {Logger} from "services" where "services" contains all my services? I've ...

Is there a way for me to retrieve the text generated by OpenAI in the completion response?

let gptResponse = await openai .createCompletion({ model: "davinci", prompt, max_tokens: 60, temperature: 0.9, presence_penalty: 0, frequency_penalty: 0.5, best_of: 1, n: 1, stre ...

What is the process for setting up a Quill Editor within an Angular 2 Component?

I am currently working on creating my own Quill editor component for my Angular 2 project. To integrate Quill into my project, I utilized npm for installation. My goal is to develop a word counter application using this component and I am referring to the ...

Having trouble launching React application on local machine due to missing node modules

I am completely new to React. I recently forked a project on Github and am attempting to run it on my own machine. However, I've noticed that the folder structure is missing the node modules. Does this mean I need to install create-react-app globally ...

Angular 2 - Utilizing multiple templates

Recently, I've been working on an application that requires the ability to load different templates dynamically. The standard template structure I'm using is as follows: <!doctype html> <html lang="en"> <head> <meta cha ...

When attempting to retrieve the first element of an array using TypeScript, the browser unfortunately returned an error stating that the property was undefined

After creating a method called getFooterContent to retrieve data and display it using the method, I encountered the following error: platform-browser.umd.js:1900 ERROR: TypeError: Cannot read property 'content' of undefined getFooterConten ...

Can someone explain to me the concept of multi provider in Angular 2

Could you please explain the concept of multi-provider and token in Angular? Also, how does multi=true work? provide(NG_VALIDATORS, { useExisting: class), multi: true }) ...

Form control identifier and input field name

I am currently developing a custom input feature for my application. One of the functionalities I want to include is auto-completion, and in my research, I found out that certain conditions need to be met for it to work: In order to enable auto-completi ...

How to use Angular i18 for localizing the value of an interpolated string in a

In my Angular application, I have two translations in xliff format. The first one is @@field-is-required, which includes a string interpolation, and the second one is @@lastname, a regular translation. <trans-unit id="field-is-required" dataty ...

Issue with Angular 6 Snap-to-Component Directive's Functionality in Chrome Browser

I have developed a Snap-to-Component Directive that functions perfectly in Firefox but encounters issues in Chrome. I have checked canIUse and it should be compatible, so I am seeking insights, especially regarding cross-browser compatibility. Your input i ...

Storing the value of e.currentTarget in a TypeScript variable with a fixed data type

Within my interface, MyObject.type is designated as a type of (constant): 'orange' | 'apple'. However, when attempting to execute: MyObject.type = e.currentTarget.value in the onChange method, an error arises since it could potentially ...

Next.js displays an error when attempting to update the `AuthContextProvider` component while rendering the `Login` component

I have developed a basic next.js application that involves user login functionality through a graphql-api. The login process utilizes the react context-API to update the context once the user successfully logs in. Upon successful login, the intention is to ...

Angular 8 utilizes JavaScript for its programming language

Looking for a solution in JavaScript - check out: codepen.io/skovtun/pen/VwLvXPB Struggling to find an equivalent for Angular 8+. I want the center block to maintain a fixed width of 1200px, and automatically compress when the left, right, or both sideb ...

What factors play a role in determining how modules are mapped to components in Angular 2?

What is the distribution method for modules on components? What benefits does this innovative concept offer compared to traditional folder organization? Choices: One module assigned to each component? One module designated per page. Other ... ...