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:

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

Using the hash(#) symbol in Vue 3 for routing

Even though I am using createWebHistory, my URL still contains a hash symbol like localhost/#/projects. Am I overlooking something in my code? How can I get rid of the # symbol? router const routes: Array<RouteRecordRaw> = [ { path: " ...

Is it possible to selectively export certain interfaces within a .d.ts file?

// configuration.d.ts export interface Configuration { MENU_STRUCTURE: Node[]; } interface Node { name: string; } Looking at the snippet above, I am aiming to only export Configuration. However, I noticed that I can also import Node from an ext ...

Angular 2 - Ensuring service executes only when boolean condition is met

I am currently dealing with a navigation menu that utilizes the ng2-page-scroll module. When scrolling through the page using hashtag links, I encountered an issue. If I navigate across routes, there is a delay in loading the data. As a result, the servic ...

Upgrade Angular 8 by substituting interconnected filter and order pipelines with custom functions

According to the Angular documentation Filtering and sorting operations can be resource-intensive. When Angular invokes these pipe methods frequently, it can lead to a degraded user experience, especially with even moderately-sized lists. Misuse of filt ...

Combining various FormGroup types into a single object type in Angular 5

I am currently utilizing the mat-stepper feature from the Angular Material design library. Within my application, I am using 3 separate FormGroups to gather information and send it to a database using the httpClient method. To achieve this, I have defined ...

Asynchronous problem when using Firebase calls within an Angular ForEach loop

Here's the code snippet I'm working with: getTotalBookListCost(bookList:string[]):number { let cost=0; bookList.forEach(el=>{ this.store.doc("Books/"+el).get().subscribe(data=>{ let temp=<Book>data.da ...

Utilizing ngModel with Angular 2 select elements

I am struggling with figuring out how to store the selected value in an object or array. When I select a value from the first selector, I want it to be stored as an object with the first selection. If I select a value from the second selector, I want two ...

Update the webpage's style by executing an npm command

Looking for a way to use different style sheets (S1.scss and S2.scss) for separate clients using npm commands during application build or with npm start. The app is built with Webpack 2. Any suggestions on how to achieve this customization? ...

Cross-origin resource sharing policy is rejecting the specified white-listed address in the CORS policy with the .WithOrigins

Despite having white-listed the origin http://localhost:4200/ in Startup.cs, Cors is still rejecting the request. This issue persists when making a GET request to my API and attempting to establish a connection through SignalR. Although I can bypass Cors ...

What is the method for importing the "numeric" library version "^1.2.6" into an Angular project?

I recently added the package "numeric": "^1.2.6" to my project. In addition, I included the types: "@types/numeric": "^1.2.1" When attempting to import this into my Angular application: import * as numeric from &ap ...

Discover the best way to cycle through bootsrap modal dialogs using angular

Within my component.ts file, there exists an array: dummyData = ['1', '2', '3']; The objective is to iterate through this array and generate 3 modals displaying values 1, 2, and 3 respectively. Here's a snippet of the ...

Exploring the use of MockBackend to test a function that subsequently invokes the .map method

I've been working on writing unit tests for my service that deals with making Http requests. The service I have returns a Http.get() request followed by a .map() function. However, I'm facing issues with getting my mocked backend to respond in a ...

The TN-Models-FP error message states that it is not allowed to use the `create` model without an associated `entity` model

Utilizing the TN-models-fp library to construct a basic api inspired by the provided examples, here is my implementation in api.ts: import { axios } from '../axios-instance' import { createApi } from '@thinknimble/tn-models-fp' import { ...

Setting the value of a form control within a form array in an Angular reactive form can be achieved by following these steps

I have a reactive form with multiple entity entries: this.entityDetailsForm = new FormGroup({ entitiesArray: new FormArray([ new FormGroup({ id: new FormControl(), name: new FormControl(), startDate: new Form ...

Exploring the potential of Angular2's WebSocket service by efficiently accessing the parent component

I need some assistance with implementing WebSockets in my angular2 application. However, I've encountered a minor issue that I can't seem to solve. Here's what I have so far: I've created a service that has a method for creating a WebS ...

Tips for switching between two icons within the same div by clicking on the icon

I am looking to implement a feature in angular2 that is similar to marking an email as Starred. For example, when I click on the empty star icon, it will make some service calls to check if the item should be starred. If the result is true, then a new icon ...

The issue with Angular2 Material select dropdown is that it remains open even after being toggled

Exploring the world of Node.js, I am delving into utilizing the dropdown feature from Angular Material. However, an issue arises once the dropdown is opened - it cannot be closed by simply clicking another region of the page. Additionally, the dropdown lis ...

Error encountered while injecting Angular dependencies in component constructor

Here is my newly created component. I am looking to allow users to adjust the count variable. import { Component, Inject } from '@angular/core'; @Component({ selector: 'app-likebtn', templateUrl: './likebtn.component.html&apos ...

Tips for efficiently inserting large amounts of data using a select subquery

I'm currently using Sequelize in my project and encountering difficulties in converting a simple query into Sequelize syntax. Furthermore, I am also exploring ways to efficiently perform bulk inserts for this particular query. The query in question i ...

Newbie seeking help with Angular Services

I'm struggling to avoid duplicating code by using a service. How can I refactor this into a service and then utilize it in the component? Any assistance would be greatly appreciated. function navigateToLink(myRecords) { this.targetLink = this.data.l ...