CODEWITHSUNDEEP
javascriptangulartypescriptangular-material
S.M.Priya
S.M.Priya

Reputation: 364

How to create tree view inside the dropdown using angular material?

Can anyone tell me, how to create a tree view inside the drop down. The drop down values will be getting from rest api call as json as follows. And subchild may contains one more level of child as well.

I have to do auto suggestion here to perform the filter from parent as well as the child level too.

 VehicleList = [
      {
        parent: "audi",
        child: [{
          type: 'G-audiA',
          subchild: [{
              id: 1,
              name: 'type audi A1'
          }, {
              id: 2,
              name: 'type audi A2'
          }]
        }, {
          type: 'G-audiB',
          subchild: [{
              id: 1,
              name: 'type audi B1'
          }, {
              id: 2,
              name: 'type audi B2'
          }]
        }]
      }, {
        parent: "bmw",
        child: [{
          type: 'G-bmwA',
          subchild: [{
              id: 1,
              name: 'type bmw A1'
          }, {
              id: 2,
              name: 'type bmw A2'
          }]
        }, {
          type: 'G-bmwB',
          subchild: [{
              id: 1,
              name: 'type bmw B1'
          }, {
              id: 2,
              name: 'type bmw B2'
          }]
        }]
  }]

Anyone help will be appreciated!!!

Upvotes: 5

Views: 11512

Answers (1)

Ioana Voicu
Ioana Voicu

Reputation: 226

Based on the first example from the Angular Material Tree docs I managed to build up a drop-down with a tree structure inside like so:

The trick for displaying the tree is to add a disabled/empty option. I used it as a label. The tree is taken from their examples so I did not modify it at all, you can modify the node structure to match your own.

In order to display the selected items in the label of the drop-down, you can create a method that will return the selected items a string as their SelectionModel object has the selected property which would return all selected nodes.

/** The selection for checklist */
checklistSelection = new SelectionModel<TodoItemFlatNode>(
    true /* multiple */
);

And in order to get the selected items from the tree:

return this.checklistSelection.selected.map(s => s.item).join(",");

For the filtering part I think you can look over this answer. Hope this is helpful!

Stackblitz

Edit: If you select a child the parent gets selected too and added in the SelectionModel even if all its children are not selected. If you don't want this behaviour comment on the function descendantsPartiallySelected. This will not check the checkbox and so parents will not be added in SelectionModel unless all children are selected

Upvotes: 5

Related Questions