Angular material - Add branch lines for tree?

user_1912411 0
Viewed 9400

I've created a simple tree with Angular material tree :

https://stackblitz.com/edit/angular-exhejg-vx5i7c?file=app/tree-dynamic-example.html

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" >
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding   >
    <button mat-icon-button ></button>
    {{node.item}}
  </mat-tree-node>


  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding   >
    <button mat-icon-button 
            [attr.aria-label]="'toggle ' + node.filename" matTreeNodeToggle>
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.item + '2'}}
    <mat-progress-bar *ngIf="node.isLoading"
                      mode="indeterminate"
                      class="example-tree-progress-bar"></mat-progress-bar>
  </mat-tree-node>


</mat-tree>

It looks like :

enter image description here

But how can I add branch lines ? something like (from here):

enter image description here

angular-material angular html javascript
5 Answers

There are no such functionality out of the box. But you can apply it via CSS. There is a working example

user_47682990

reply to the above answer the line breaks when two nodes expanded under one parent node

user_102929980

enter image description hereenter image description here I am using mat-nested-tree. step-1 Add a left border to both the li. step-2 Add another div inside li. apply below css see image...

.setBorder{
  border-bottom: 1px solid black;
  width: 22px;
  height: 0px;
  position: relative;
  left: 0px;
  top: 0px;
}
.borderMain{
  border-left: 1px solid black;
}
user_130996070

In reference to https://stackoverflow.com/a/52203131/14783892, change this:

.mat-nested-tree-node:last-child ul {
  border-left: 1px solid white;
  margin-left: -41px;
}

To this:

.mat-nested-tree-node:last-child > li > ul {
  border-left: 1px solid #fff;
  margin-left: -41px;
}

This change should resolve the line-breaking issue.

user_147838920

Solution for the line breaks when two nodes expanded under one parent node just clear your entire .html, .ts, .css or .scss files completely. Then paste the above code in the same way as there in stackblitz., just add: import { OnInit } from '@angular/core'; in .ts file along with code it will work's well and fine now.

user_172873620
Related