asked on

Dynamically bind the data to the child drop down from the API

Hi Team,

How can we dynamically load the child dropdown based o the selection of the parent dropDown? Enclosing the snapshot for the same. I am using Angular 12, appreciate if you have any running example.

Satmisha

satmisha

ASKER

pls suggest experts...

ASKER CERTIFIED SOLUTION

Misha

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

satmisha

ASKER

Thank You Misha.

Can I attach the dynamic data to the Mat tree, consider the same example but with Mat Tree ? I am sorry I didn't incorporate this in the requirement, if you want I will create another ticket for that.

Misha

Yes, you can use dynamic data it Mat tree. Example is on official Angular site
https://material.angular.io/components/tree/examples

There is one of examples from site:

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">  <!-- This is the tree node template for leaf nodes -->  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>    <!-- use a disabled button to provide padding for tree leaf -->    <button mat-icon-button disabled></button>    {{node.name}}  </mat-tree-node>  <!-- This is the tree node template for expandable nodes -->  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>    <button mat-icon-button matTreeNodeToggle            [attr.aria-label]="'Toggle ' + node.name">      <mat-icon class="mat-icon-rtl-mirror">        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}      </mat-icon>    </button>    {{node.name}}  </mat-tree-node>
</mat-tree>

Open in new window

You can populate dataSource dynamically

 dataSource = new MatTreeFlatDataSource(,....)
  this.dataSource.data =  YourData;

Open in new window

You can get this data from parent component too.

Please detail your question about Mat Tree...