CODEWITHSUNDEEP
angularangular-materialangular6
PGH
PGH

Reputation: 2204

How to apply styles for tree component of angular material

I am using tree component of angular material for my project.Here is stackblitz link,Here i need to achieve two things:

1)The text color of the child element has to change on mouse hover.

2)On clicking/selecting the child element the background color has to be changed,The background color as to be constant until i select the next child element something like list with selection.

Something like this

enter image description here

Upvotes: 8

Views: 12055

Answers (1)

Aniket Avhad
Aniket Avhad

Reputation: 4145

i have created Stackblitz demo

this code work as per your requirement

i have added some in

tree-loadmore-example.html

<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding
  (click)="activeNode = node" [ngClass]="{ 'background-highlight': activeNode === node }">
        <button mat-icon-button></button> <span class="txtColor">{{node.item}}</span>
</mat-tree-node>

and in .ts added

activeNode:any;

Upvotes: 16

Related Questions