Выполнить двустороннюю привязку данных в компоненте дерева

Question

Я использую дерево компонент в моем проекте. Когда я выбираю дочерний элемент (i, e HTML5) из родительского элемента (i, e Web Technologies). Выбранный дочерний элемент (HTML5) отображается в поле ввода, как показано на рисунке ниже.

Наряду с этим я хочу присвоить некоторые значения дочернему элементу и отобразить его на другом элементе div в то же время, когда выбран дочерний элемент (HTML). Как показано в ниже изображение.

Здесь мне нужно выполнить двустороннюю привязку данных. Я получил ресурсы для выбора компонента , но не смог получить его для компонента дерева . Вот ссылка stackblitz .

Answer 1

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>

РЕДАКТ.:

<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 )
  }