PrimeNG Tree expanded Icon not showing

UI Components for Angular
Post Reply
Ildelian
Posts: 1
Joined: 18 Jan 2022, 10:57

18 Jan 2022, 11:28

I have an Angular 13.1.0 project with PrimeNG 13.0.2
I'm trying to use the Tree component to paint a tree with parents and childs, my problem is with the "expandedIcon" and "collapsedIcon" property.

The component simply ignore this values, and always painting the parent expandable node with the default icon "pi-chevron-right". Apart from this, the icon is showing always as a blank square.

My problem with the square icon will be solved if the node shows a Fontawesome icon, that i define on the "expandedIcon" and "collapsedIcon" property, but prime faces always try to use the default icon.

This is my parent node:

Code: Select all

    {
    	"label": "Page Info",
    	"type": "PAGE_NODE",
    	"expandedIcon": "fas fa-chevron-up",
    	"collapsedIcon": "fas fa-chevron-down"
    }
And PrimeNG draw it like this:
Image

I have see the source code of PrimeNG, and the icon is on the code, without any option to change it:

https://github.com/primefaces/primeng/b ... ee/tree.ts

Code: Select all

    <button type="button" [attr.aria-label]="tree.togglerAriaLabel" class="p-tree-toggler p-link" (click)="toggle($event)" pRipple tabindex="-1">
                            <span class="p-tree-toggler-icon pi pi-fw" [ngClass]="{'pi-chevron-right':!node.expanded,'pi-chevron-down':node.expanded}"></span>
                        </button>
As i can see, the code is printed with no option to change it. Is not a better option to load it with a function to get the icon of the property "expandedIcon"?

Code: Select all

<button type="button" [attr.aria-label]="tree.togglerAriaLabel" class="p-tree-toggler p-link" (click)="toggle($event)" pRipple tabindex="-1">
                            <span class="p-tree-toggler-icon pi pi-fw" [ngClass]="getExpandedIcon()"></span>
                        </button>

getExpandedIcon() {
        let icon: string;

	if (this.node.expanded) {
		icon = this.node.expandedIcon || 'pi-chevron-down'
	} else {
		icon = this.node.collapsedIcon || 'pi-chevron-right'
	}

	return icon;
}

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests