PrimeNG 6.0.0-rc1 TreeTable cannot expand rows

Question

I have the same problem as this PrimeNG forum post.

Basically the TreeTable component correctly reads the tree but the

<p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>

isn't somehow supported which is the arrow to expand the rows

'p-treeTableToggler' is not a known element:

1. If 'p-treeTableToggler' is an Angular component, then verify that it is part of this module.
2. If 'p-treeTableToggler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I'm really confused how it is working on the PrimeNG showcase but not for me and a couple people that post in the PrimeNG forum.

Answer 1

If you are using the latest primeNg then make sure that you have the primeicons and css style also loaded. Without this I wasn't getting the tree structure for the data. Like treetable component, if you don’t import primeicons, the > chevron-right wont’t display.

 yarn add primeicons or npm install primeicons –save

and modify vendor.scss:

add @import "~primeicons/primeicons.css";

Answer 2

As you can see from Treetable source code, they are using primeicons like pi pi-fw pi-chevron-down :

@Component({
    selector: 'p-treeTableToggler',
    template: `
        <a href="#" class="ui-treetable-toggler" *ngIf="rowNode.node.leaf === false || rowNode.level !== 0 || rowNode.node.children && rowNode.node.children.length" (click)="onClick($event)" [style.visibility]="rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden'" [style.marginLeft]="rowNode.level * 16 + 'px'">
            <i [ngClass]="rowNode.node.expanded ? 'pi pi-fw pi-chevron-down' : 'pi pi-fw pi-chevron-right'"></i>
        </a>
    `
})