CODEWITHSUNDEEP
javascripthtmlangularangular-material
d11
d11

Reputation: 380

Angular material - Add branch lines for tree?

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

Upvotes: 10

Views: 14971

Answers (5)

harikrishna bala
harikrishna bala

Reputation: 1

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.

Upvotes: -1

Steven Redman
Steven Redman

Reputation: 21

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.

Upvotes: 1

hari prasad
hari prasad

Reputation: 33

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

Upvotes: 2

umar suhail
umar suhail

Reputation: 116

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

Upvotes: 1

Aleksandr Neizvestnyi
Aleksandr Neizvestnyi

Reputation: 578

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

Upvotes: 14

Related Questions