CODEWITHSUNDEEP
angularangular-materialmaterial-designangular7
Usr
Usr

Reputation: 2838

Angular 7 style the different levels of mat tree

I'm implementing a mat-tree because I need to have different levels of indentation in my data. For now I basically copied the code from documentation and adjusting things to make it work my way (like deleting the + button), but basically I'm still at the level of this stackblitz .
Now I would like to style differently the various levels of this tree, like level 1 has backround gray, level 2 light gray and level 3 white. I know I'll have always a maximum of 3 levels of nesting in my data.
But I don't know how to specify the style for each level.
So far I've found nothing in the docs; any solution?

Upvotes: 0

Views: 2237

Answers (1)

StepUp
StepUp

Reputation: 38094

You need to get hierarchy level and then you can apply style. Let me show an example.

HTML:

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle 
      matTreeNodePadding level="level">
    <div [style.background]="getColor(node)">
      <button mat-icon-button disabled></button>      
      <mat-checkbox class="checklist-leaf-node"
                  [checked]="checklistSelection.isSelected(node)"
                  (change)="todoLeafItemSelectionToggle(node)">{{node.item}}</mat-checkbox>
    </div>
  </mat-tree-node>

  <!-- Other code is omitted for the brevity -->

TypeScript:

getColor(node){
    let level = this.getLevel(node);
    let color = '';
    switch (level) {
            case 1:
                color = 'grey'
                break;
            case 2:
                color = 'lightgrey'
                break;
            default:
                color = 'white'
        }
    return color;
  }

Upvotes: 1

Related Questions