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

Question

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!!!

score 5 · Accepted Answer · edited Jul 07 '21 at 09:50

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

@loana Voicu not able to acheive the filter by parent/child. While typing parent name, child names list also should come. The same, if we type child name,the parent name also to be filtered..?? — S.M.Priya, Aug 04 '20 at 12:34
I updated the stackblitz by adding to the ChecklistDatabase class a method which actually filters the tree. That method is invoked on input change. I also modified the tree structure a little. Please take a look at the new solution :) https://stackblitz.com/edit/angular-material-tree-dropdown?file=src%2Fapp%2Fapp.component.ts — Ioana Voicu, Aug 08 '20 at 09:53
@Loana here If i select parent/second level child, I needs to bind only the third level children names in placeholder. I couldn't get solution only to bind third level. Can you tell me is it possible ? — S.M.Priya, Aug 14 '20 at 07:34

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

1 Answers1