Enhance the firstLevel Tree component with Angular Material

I recently developed a multi-level tree in Angular with 3 levels. Currently, when the tree is loaded, only the first level is opened by default. Check out the demo here

My goal is to enable users to add or delete items within this tree, and whenever an action is performed, I want to ensure that it automatically opens up to level 1.

Although I tried using the following code snippet, it doesn't seem to work as expected:

     @ViewChild('tree') tree;

  ngAfterViewInit() {
    this.tree.treeControl.expandAll();
  }

If you have any suggestions or solutions on how to achieve this functionality, please let me know!

javascriptangulartypescriptangular-material

Answer №1

If you want to access a specific node within the tree structure, one approach is to flatten the tree by utilizing the FlatTreeControl and leveraging its expand() method. It's important to keep in mind that in order to open a sub-node, all of its parent nodes must also be expanded. You can give this method a try:

Controller

export class AppComponent implements AfterViewInit {
  treeControl = new FlatTreeControl<TreeNode>(
      node => node.level, node => node.expandable);
  .
  .
  ngAfterViewInit() {
    this.treeControl.expand(this.treeControl.dataNodes[0]);   // <-- open root node
    this.treeControl.expand(this.treeControl.dataNodes[1]);   // <-- open node 1
  }
}

I have made some modifications to your Stackblitz.

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

Upon clicking, the input texts revert to their original default values

I have a form below that is working as intended, except for one issue. When I click the 'Add' link, the texts in all the textboxes revert to their default values, as shown in the images. How can I resolve this problem? Thank you. before click: ...

javascripthtml

Error message in TypeScript class extension: "TypeError: Object.setPrototypeOf expects an object or null, received undefined."

In my Ionic 3 application, I have the following code snippets: @Injectable() // I also tried without @Injectable and encountered the same error export class M_someClass { constructor () { } method1 () { console.log("method1 used") } } @Injectabl ...

angulartypescriptionic2

Using ES6 to create a callback function that stores values in a Map

I've been trying to find an answer to this question by searching extensively, but haven't had any luck. Currently, I am developing a React app and faced with the task of storing the state, which happens to be a map, in a local variable. Here is ...

javascriptreactjsecmascript-6maps

Extend jQuery deeply, only replacing values and not adding new keys

For instance, consider the following two JSON objects: First Object: { "surname" : "Raghuvanshi", "work" : { "title": "title1" }, "name" : "Navin" } Second Object: { "work" : { "title": "title2", "field": "field2" }, "name" ...

javascriptjquery

Using Struts2 actions in combination with jQuery AJAX calls

Similar Question: How to utilize $.ajax() method in struts2 In simple terms: 1. Could someone explain how to trigger a struts action using jquery ajax? (without using the struts jquery plugin) 2. How do I retrieve results and display HTML output cor ...

javascriptjqueryajaxstruts2

javascript - developing a neutral constructor

Similar Question: Constructors in Javascript objects I am exploring the concept of creating classes in JavaScript. I am struggling to grasp it fully. Now, I am curious if it's possible to create a constructor in JavaScript, similar to what can b ...

javascript

What is the best way to retrieve the src value upon clicking on an image in a JavaScript function with multiple images displayed on

I have 3 images on my website. Each time I click on an image, I want to retrieve the source value. I attempted the code below, but it doesn't seem to work with multiple images. <div class="test"> <a href="#" class="part-one" ...

javascripthtml

Unleashing the power of scroll-based dynamic pagination in ReactJS

I have 33 entries in a json format. I've implemented a code that tracks the scroll on my page and loads new 10 entries at a time. Everything works smoothly when the scroll value is set to equal or less than zero. When the scroll reaches the bottom of ...

javascriptreactjs

What causes the node_modules folder to become corrupted when publishing an AspNetCore2 project with Visual Studio?

During the development of my AspNetCore project using Kendo, Angular5, and AspNet Mvc, everything was running smoothly. However, when trying to publish the project, I encountered a strange issue where it breaks. https://i.sstatic.net/2xQ1Q.png I then cam ...

angularvisual-studionpmasp.net-corekendo-angular-ui

What are the specific files I should modify for HTML/CSS in my Ruby application?

My application was initially created with an introduction from: http://guides.rubyonrails.org/getting_started.html I am now looking to add some color and style through CSS. I have located the JavaScript and CSS files, but I am unsure which file is respons ...

javascripthtmlcssruby-on-railsruby

What's the best way to add row numbers within ajax requests?

I wrote a function that retrieves values from a form using jQuery's AJAX method: function getvalues(){ var sendid = $('#id').val(); $.ajax({ type: "POST", url: "ready.php", data: {sendid} }).done(function( result ) { $("#msg").html( "worked ...

javascriptajaxjquery

Unable to import CSV file

I'm currently in the process of developing a CSV editor that involves importing a CSV file and converting it into HTML tables. Below is the code I have been working on: <html> <head> <title></title> </head> <body& ...

javascripthtmlcsv

"Although the NextJS client-side data is present, it seems to be struggling to

I am facing an issue while trying to display fetched data on a blog page. Although the data is successfully retrieved client-side and I can view it using console.log(), it does not appear on the page and the elements remain empty. I am completely puzzled. ...

reactjstypescriptnext.js

What is the best way to increase the row spacing in an Ant Design Table?

I have a table with expandable rows in antd, and I am looking to add some vertical space between the rows. I've tried using the rowClassName property provided by antd, but it did not work as expected. I also attempted to use a custom component, but th ...

javascriptreactjsnext.jsantdant-design-pro

Having difficulty asserting the dual-function button in both its disabled and enabled states

I have a button that is part of a dual-action setup. This button is disabled until a certain event occurs. Here is the DOM structure while the button is disabled: <div class="doc-buttons"> <a href="#" onclick="actualsize();" id="tip-size" cla ...

javascriptjavajqueryselenium-webdriverwebdriver

The comparison between client-side and server-side programming logic

Looking for guidance in website development as I am unsure of where to place my logic. Let's consider a scenario: when a user selects filters, such as price range or home type on a real estate website like Zillow, the list of houses gets updated accor ...

angularwebclient-sideserver-side

Having difficulty retrieving the user list from Firebase within Angular 6

I am facing an issue with retrieving the list of users from Firebase. Despite having values already set in the database, I am getting empty arrays. The strange thing is that I can successfully add users to the Firebase database and retrieve the list of us ...

javascriptangularfirebase-realtime-databaseangular2-servicesangularfire2

Adjusting the Image Width in React to Match Bootstrap Column Width

Exploring the capabilities of the react-image-mapper library, I stumbled upon an interesting feature: the ImageMapper component offers a prop called width, representing the image width in pixels. Integrating this component into my application based on the ...

javascriptcssreactjsresponsive-designreact-bootstrap

Adding items to an array retrieved from JSON

My goal is to merge 3 different Facebook feeds into a single object called "item." Each item includes the post creation time and the JSON data itself. However, I'm facing an issue where only 5 items are displayed when I check the log, even though ther ...

javascriptjqueryjson

Unlock the Secrets of Soundcloud: Practical Steps to Implementing the Soundcloud API in Real Life

I attempted to publish the exact .html and .js codes on the internet and host them on my own server. I am aiming to duplicate this particular example: You can check out my code at www[dot]whatsgucci[dot]com/cloudstalk.html Here is the code I utilized: ...

javascripthtmlcsssoundcloud