I'm on the lookout for a component similar to angular-ui-tree that is compatible with angular

As a new developer, I am in search of a component similar to:

But specifically for Angular 6, with all the same functionality (drag-and-drop capability, nested items, JSON structure, etc.).

I have come across some components that either lack dragging functionality or do not support nesting.

I tried using https://www.npmjs.com/package/angular-tree-component, but it relies on mobx and requires extensive code changes to adapt the JSON file format as needed.

The API provides me with a JSON response that simply needs to be displayed, with real-time updates triggering a tree reload.

(Please excuse any language errors)

Thank you

Answer №1

I utilized the specified component to extract a json response from an api and construct the tree.

https://www.npmjs.com/package/angular-tree-component

You can review my source code here:

https://github.com/daniel-luna-gonzalez/controlGestionFront/blob/master/src/app/new-subject/addressee-tree.component.ts

This code generates a structure like this:

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

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

The instanceof operator does not recognize the value as an instance and is returning false, even though it

Is there a method to verify the current instance being used? This is what I am logging to the console: import { OrthographicCamera } from 'three'; // Later in the file: console.log(camera instanceof OrthographicCamera, camera); and the result ...

activate the change detection for a specific subcomponent

Let's say I am conducting a test on MyComponent, which has a template that includes SubComponent The structure of MyComponent is as follows @Component({ selector: 'my-component', template: ` <sub-component [input]="property"> ...

"Looking for a way to create a new line in my particular situation. Any tips

Here is the code snippet I am working with: let list: Array<string> =[]; page.on('request', request => list.push('>>', request.method(), request.url()+'\\n')); page.on('respon ...

How can I resolve a bug in Nuxt2 when using TypeScript?

I need help with implementing code using Nuxt.js 2 option API with TypeScript. computed: { form: { get: () => this.value, set: (value) => this.$emit('input', value) } } Additionally, I am encountering the fo ...

What is the best way to set a checkbox to null instead of false using Angular?

I am currently developing a filtering system that allows users to select different parameters to filter through a list of items. For instance, the item list could be a collection of dishes with filters represented as checkboxes labeled as vegan, vegetaria ...

What is the process for bringing in AngularJS 2? // Bring in { routerTransition } from './router.module;

Currently, I'm experimenting with implementing page transitions using Angular 2. The resources I've gone through indicate that I need to import: // import { routerTransition } from './router.module; However, despite following these instruc ...

Having trouble with installing npm package from gitlab registry

I recently uploaded my npm package to the GitLab package registry. While the upload seemed successful, I am facing an issue trying to install the package in another project. When I run npm install, I encounter the following error: PS E:\faq\medu ...

Angular form group not providing data upon submission

Encountering a peculiar issue here. When the submit button is clicked, my angular form group does not return anything. Additionally, nothing is being logged to the console upon clicking. Interestingly, this form is almost identical to another one that func ...

Tips for sorting an array of objects by multiple keys while maintaining the order of each key that comes before

I am looking to create a versatile function that can organize an array of objects based on specified keys, while maintaining the order of previous keys. Here is a sample scenario: const input = [ { a: 'aardvark', b: 'bear', c: 'c ...

Display clickable buttons beneath the Material-UI Autocomplete component

I want to place buttons ("Accept" and "Cancel") below the MUI Autocomplete element, and I am trying to achieve the following: Limit the Autocomplete popover height to display only 3 elements. To accomplish this, pass sx to ListboxProps Ensure that the b ...

Retrieve the chosen item to automatically fill in the input fields using Ionic 2 and Angular

My goal is to create a dropdown menu populated with a list of items, and when a product is selected, its price should automatically appear in the quantity field. <ion-item> <ion-label>Item</ion-label> <ion-select (ionChange)="getP ...

The current Angular CLI version is displayed as 7.3.9, not version 8

I am currently working on setting up a new Angular project using the latest version of Angular. After installing the Angular CLI globally with the command npm install -g @angular/cli, I ran ng v to check the version and it displayed Angular CLI: 7.3.3 in ...

What is the best way to extract values from a specific table column and store them in an array using Angular?

I have a section of code containing a table in my component: expect-next-month.component.html <table id="users"> <tr> <th>Number of month</th> <th>Total checking e ...

What is preventing Apollo from achieving full transformation?

I have been struggling with an issue involving Apollo mutation for the past 2 days. Whenever I call a mutation on Angular Apollo generated code and subscribe to it, the subscription never completes. I am expecting a result from the server, but nothing is ...

A method to simultaneously retrieve all emitted values from multiple EventEmitters in Angular 7

I am facing a scenario where I have a parent component that consists of multiple child components. Each child component may differ from the others, creating a diverse structure within the parent component. Here's an example: ...

Error message in Angular 6: Unable to bind to 'org' as it is not recognized as a valid property of 'appCycleDirection' (Directive)

Here is the code snippet of a directive I have created: import { Directive, Input, OnInit } from '@angular/core'; import {GoogleMapsAPIWrapper} from '@agm/core'; declare let google: any; @Directive({ // tslint:disable-next-line:dire ...

What are the advantages of utilizing NGRX over constructor-injected services?

Have you ever wondered about the benefits of using NGRX or NGXS for an Angular application instead of constructor injected services to manage component IO? Is it simply to prevent mutation of component properties references without replacing the entire pr ...

The download progress of a substantial blob from the API to the user is not displayed until the entire download is complete

Recently, I encountered a problem similar to one described in this post. However, the original post lacked details and context, so here's what I've found: When my component triggers the download file method, which then calls the download file se ...

Ways to implement a loading template with OnPush change detection technique

Currently, I am retrieving a route parameter: searchResults$: Observable<string[]>; constructor( private route: ActivatedRoute, private svc: SearchService) { this.searchResults$ = this.route.paramMap.pipe( map((p: ParamMap) => p.get(&a ...

Custom JSX element failing to include children during addition

I have created a unique component in JSX, like this: const CustomComponent = ({content}) => { return <div className={content}></div>; } I am using it as follows: <CustomComponent content={"xyz"}> <p>Some additio ...