Afficher une branche à côté d'un treeview (angular 6+)

Bonjour à tous,

dans le cadre de ma mission, je dois afficher une branche de mon arbre à droite de ce dernier (il est situé à gauche).

Pour se faire, il faudrait que je réalise un bouton qui afficherait la branche en cours et faire un affichage par défaut de la branche primaire (affichage des enfant du noeud parent primaire)

Je ne vois pas comment réaliser ceci avec l'outil suivant : https://material.angular.io/components/tree/overview

J'ai réalisé mon treeview via une méthode qui créer les noeuds de façon récursive en fonction de la relation entre les éléments : children.parent === parent.id

Voici le code utilisé concernant ce dernier (il y a d'autres code mais ces derniers ne concerne pas le treeview, j'ai donc préféré ne pas les joindre au sujet) :

Code typescript méthode :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
createSubTree(node: InterfaceNode, remainingNode: Array<InterfaceNode>) {
    node.children = remainingNode.filter(item => item.parent === node.id);
    const children: Array<InterfaceNode> = [];
    const indexsToMove: Array<number> = [];
    for (let i = 0; i < remainingNode.length; i++) {
      const currentItem = remainingNode[i];
      if (currentItem.parent === node.id) {
        children.push(currentItem);
        indexsToMove.push(i);
      }
    }
    indexsToMove.forEach(index => remainingNode.splice(index, 1));
    node.children = children;
    children.forEach(item => this.createSubTree(item, remainingNode));
  }

Code typescript ngOnInit :

Code:

1
2
      this.createSubTree(this.getOrganisationStoreContent.find(item => item.parent === '0'), this.getOrganisationStoreContent);
      this.dataSource.data = [this.getOrganisationStoreContent.find(item => item.parent === '0')];

Code view html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="tree tree-icon">
        <!-- This is the tree node template for leaf nodes -->
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
          <li class="mat-tree-node">
            <!-- use a disabled button to provide padding for tree leaf -->
            <button mat-icon-button disabled></button>
            <!-- {{node.name}}, {{node.id}}, {{node.parent}}, {{node.label}}, {{node.type}} -->
            <div class="icon" [ngSwitch]="node.type">
                  <mat-icon *ngSwitchCase="'folder'">folder</mat-icon>
                  <mat-icon *ngSwitchCase="'table'">table_chart</mat-icon>
                  <mat-icon *ngSwitchCase="'link'">link</mat-icon>
                  <mat-icon *ngSwitchCase="'view'">remove_red_eye</mat-icon>
                  <mat-icon *ngSwitchCase="'query'">query_builder</mat-icon>
                  <mat-icon *ngSwitchCase="'application'">apps</mat-icon>
                  <mat-icon *ngSwitchCase="'groupe'">group</mat-icon>
                  <mat-icon *ngSwitchCase="'stamp'">mail</mat-icon>
                  <mat-icon *ngSwitchCase="'statut'">group</mat-icon>
                  <mat-icon *ngSwitchCase="'pocket'">insert_drive_file</mat-icon>
                  <mat-icon *ngSwitchCase="'note'">note</mat-icon>
                  <mat-icon *ngSwitchCase="'signature'">wrap_text</mat-icon>
                  <mat-icon *ngSwitchCase="'mark'">bookmark</mat-icon>
                  <mat-icon *ngSwitchDefault style="display: none;"></mat-icon>
            </div>
            {{node.label}}
          </li>
        </mat-tree-node>
        <!-- This is the tree node template for expandable nodes -->
        <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
          <li>
            <div class="mat-tree-node">
              <button mat-icon-button matTreeNodeToggle
                      [attr.aria-label]="'toggle ' + node.name">
                <mat-icon>
                  {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                </mat-icon>
              </button>
              <!-- {{node.name}}, {{node.id}}, {{node.parent}}, {{node.label}}, {{node.type}} -->
              {{node.label}}
            </div>
            <ul [class.tree-invisible]="!treeControl.isExpanded(node)">
              <ng-container matTreeNodeOutlet></ng-container>
            </ul>
          </li>
        </mat-nested-tree-node>
      </mat-tree>

Comment puis-je en dehors du premier treeview (à sa gauche) afficher le contenu de la branche active s'il vous plait ?

Résultat attendu :

Pièce jointe 525139

Je vous remercie d'avance et vous souhaites une très bonne journée.