In my ionic angular project, I have included a primeNG tree. In my tree, the toggle buttons...

This is my html code. I have put indentation to the nodes using typescript, but toggle button are not getting indented.

<p-tree [value]="treeData" selectionMode="single" [draggableNodes]="true" [droppableNodes]="true"(onNodeSelect)="onNodeSelect($event)" styleClass="w-full md:w-[30rem]">
<ng-template let-node let-index="index" pTemplate="default">
<div class="tree-node">
<!-- Icon and toggler button wrapper -->
<div class="icon-container" [style.padding-left.px]="getIndentation(node)">
<button pTreeNodeToggler class="toggler" style="margin-left: 16px"> </button>
<ion-icon name="folder-open"></ion-icon>
<ion-icon name="document"></ion-icon>
<span class="node-label">{{ node.label }}</span>
</div>`your text`
</div>
</ng-template>
</p-tree>


I have tried putting margin-left and padding-left and

:host ::ng-deep .p-tree-node-toggle-button { padding-left:20px; }

Continue reading...