Linking children to their parents in a mat tree structure

Question

Linking children to their parents in a mat tree structure

I'm looking to create a mat tree based on the provided diagram.

So far, I've managed to design the icons and boxes, but I'm struggling with drawing the connecting lines. Can anyone assist me with this part? I'm using a mat nested tree for this project. You can find my code on StackBlitz here: https://stackblitz.com/edit/angular-qhper2 Please note that Mat icons are not loading correctly in StackBlitz; however, I only need help with the lines.

I know it's achievable through CSS by styling the li and ul tags, but unfortunately, my CSS skills are limited. Any guidance or support would be greatly appreciated.

css angular tree angular-material

Answer 1

Answer №1

Utilize the code snippet below:

<mat-checkbox [(ngModel)]="recursive">Recursive</mat-checkbox>
 <mat-card>
  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
   <mat-nested-tree-node *matTreeNodeDef="let node">
    <li>
      <div class="mat-tree-node">  {{node.item}}</div>
    </li>
   </mat-nested-tree-node>
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
    <li class="example-tree-container">
      <div class="mat-tree-node">
        <button mat-icon-button matTreeNodeToggle
                [matTreeNodeToggleRecursive]="recursive"
              [attr.aria-label]="'toggle ' + node.filename">
          <mat-icon>
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.item}}
    </div>
    <ul class="example-tree-nested-node">
      <div  *ngIf="treeControl.isExpanded(node)">
      <ng-container matTreeNodeOutlet></ng-container>
      </div>
    </ul>
  </li>
  
   </mat-nested-tree-node>
 </mat-tree>

For full access to the code, click on the link below:

stackblitz

Answer 2

Utilize the code snippet below:

<mat-checkbox [(ngModel)]="recursive">Recursive</mat-checkbox>
 <mat-card>
  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
   <mat-nested-tree-node *matTreeNodeDef="let node">
    <li>
      <div class="mat-tree-node">  {{node.item}}</div>
    </li>
   </mat-nested-tree-node>
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
    <li class="example-tree-container">
      <div class="mat-tree-node">
        <button mat-icon-button matTreeNodeToggle
                [matTreeNodeToggleRecursive]="recursive"
              [attr.aria-label]="'toggle ' + node.filename">
          <mat-icon>
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.item}}
    </div>
    <ul class="example-tree-nested-node">
      <div  *ngIf="treeControl.isExpanded(node)">
      <ng-container matTreeNodeOutlet></ng-container>
      </div>
    </ul>
  </li>
  
   </mat-nested-tree-node>
 </mat-tree>

For full access to the code, click on the link below:

stackblitz

Linking children to their parents in a mat tree structure

Answer №1

Similar questions

Angular CORS Policy

What are the best practices for utilizing intro.js effectively on mobile devices?

Various instances of the jQuery niceScroll plugin

Delete a specific element from an array using a specified criteria

Establish a connection using Angular 4 HTTP POST to communicate with a Java REST API, as it is not permitted on the server

Having trouble with jQuery's scrollLeft function on elements that are not currently visible

Personalizing a class specifically for error messages within the jQuery Validation plugin

Tips for showcasing information on an HTML website

Placing a div with position:absolute inside another div with position:absolute and turning them into position:fixed

The error TS2304 in @angular/common is indicating that the name 'unknown' cannot be found

Export an array of objects using the Angular XLSX library

Is there a way to retrieve the initial item of a JSON array from an HTML document using Angular 2?

The appearance of a CSS select box may vary across different computers and web browsers

How can I load a separate component.html file using a component.ts file?

Interactive SVG viewport dimension

Exploring the World of Micro-Frontends with the Angular Framework

What is the best way to trigger an onclick event for an input element with a type of "image"?

"CSS: Mastering the Art of Color Curves

Guide on successfully importing a pretrained model in Angular using TensorFlow.js

Item floating in a list