Binding click event to expansion icon in tree table

January 23, 2022

I am working on angular app. I am using tree table from primeng. In this tree table I have a expansion icon. Code is as follows:

Stackblitz :

https://stackblitz.com/edit/primeng-treetablestyle-demo

I want to bind a (click) event on this expansion panel and pass data to component on click of expansion icon and to want to know if it is expanded or not. I tried giving following code in div and tried binding click event to it, but it is not working

  <div (click)="toggleClicked(data)">  <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler> </div>

how can I do that?

>Solution :

There is an (onNodeExpand) method written on <p-treeTable></p-treeTable> tag. You can write a function and pass $event to that function and know when your tree is expanded

 <p-treeTable (onNodeExpand)="onNodeExpand($event)" ... > 
  ...
  <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
 </p-treeTable>