To perform two way data binding in tree component

Question

I am using a tree component in my project.When i select the child element(i,e HTML5) from the parent element (i,e Web Technologies).The selected child (HTML5) element is displayed on the input field as shown in below image.

Along with this i want to assign some values to child element and display it in on other div at the same time when child element (HTML)is selected.As shown in below image.

Here i need to perform two way data binding.I got resources for select component but unable get it for tree component.Here is the stackblitz link.

Can you please add more details what is the problem you are facing ? — Parth Savadiya
– Parth Savadiya, Commented Sep 11, 2018 at 4:38
Here on selecting/clicking the child element(i,e HTML5). I need to display some data(dummy) outside the tree component,Just to show that i have selected HTML5. — PGH
– PGH, Commented Sep 11, 2018 at 4:41

Akj · Accepted Answer · 2018-09-11 05:58:53Z

2

DEMO

HTML:

<div class="text-inside">
    <mat-form-field>
        <input matInput placeholder="Select offering" [(ngModel)]="selectedItem" (focus)="showDropDown = true">
    </mat-form-field>
    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" *ngIf="showDropDown">
        <!-- Leaf node -->
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)="selectedItem = node.item;showDropDown = false;">
            <button mat-icon-button disabled></button> {{node.item}}
        </mat-tree-node>

        <!-- expandable node -->
        <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
            <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" (click)="loadChildren(node)" matTreeNodeToggle>
                <mat-icon class="mat-icon-rtl-mirror">
                  {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                </mat-icon>
              </button> {{node.item}}
        </mat-tree-node>

        <mat-tree-node *matTreeNodeDef="let node; when: isLoadMore">
            <button mat-button (click)="loadMore(node.loadMoreParentItem)">
                Load more...
              </button>
        </mat-tree-node>
    </mat-tree>
    <div [hidden]="!selectedItem || showDropDown">
        <div>
            List Of Guides {{selectedItem}}:
            <ul>
                <li *ngFor="let li of Guides">{{li}}</li>
            </ul>
        </div>
    </div>
</div>

EDITS:

<div [hidden]="!selectedItem || showDropDown">
        <div>
            List Of Guides {{selectedItem}}:
            <ul>
                <li *ngFor="let li of getGuides(selectedItem)?.data">{{li}}</li>
            </ul>
        </div>
    </div>

TS:

Guides: Array<any> = [
    {name: 'css3' , data:  ['Tutorial Css3', 'Videos Css3' , 'Questions Css3']},
    {name: 'HTML5' , data :  ['Tutorial HTML5', 'Videos HTML5', 'Questions HTML5']},

    {name: 'Javascript', data:  ['Tutorial Javascript', 'Videos Javascript', 'Questions Javascript']},

  ]
  hideGuide: boolean = false;

  getGuides(selectedItem){
    return this.Guides.find(data => data.name == selectedItem )
  }

edited Sep 11, 2018 at 5:58

answered Sep 11, 2018 at 4:55

Akj

7,2513 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

PGH Over a year ago

How can i assign different values for another child element, for example if i select css i want to display another set of values.

Akj Over a year ago

Create Array Of Gudides with keys : Guides: Array<any> = [ {'css': ['Tutorial', 'Videos', 'Questions']} ]

PGH Over a year ago

I tried but the output is coming like this [object Object]

PGH Over a year ago

Sorry to say this,I am unable to extract the object.

PGH Over a year ago

I got it, Thank you so much.

|

Collectives™ on Stack Overflow

To perform two way data binding in tree component

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related