Avatar of satmisha
Flag for India 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.



Avatar of undefined
Last Comment

8/22/2022 - Mon

pls suggest experts...

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question

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.

Yes, you can use dynamic data it Mat tree. Example is on official Angular site

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>

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

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck