TreeSelect: Issue with TreeSelect in PrimeNG 16 - Unwanted '0' Prefix in Labels

[BouazzaSeif]

Describe the bug

Hello,

I've encountered an issue with TreeSelect in PrimeNG 16 where the labels display an undesired '0' in front of each one. This problem is illustrated in the attached screenshot.

Additionally, the same bug can be observed on the official PrimeNG documentation site:

Could you please look into this matter and provide a fix for the unwanted '0' prefix in the TreeSelect labels? It impacts the user experience, and your prompt attention to this issue would be highly appreciated.

Thank you.

Environment

"primeng": "16.9.1"
"angular": "16"

Reproducer

https://stackblitz.com/edit/skfymg?file=src%2Fservice%2Fnodeservice.ts

Angular version

16

PrimeNG version

16.9.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.17.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[adcore-dev]

I opened same issue few weeks ago, no feedback till now
#14193

[jschu]

A workaround for this issue is to create a template to override the label. Unfortunatelly there is no predefined template to do this. So you have to set the property type for all your TreeNodes and define a template with the exact same name.

https://stackblitz.com/edit/skfymg-giimzn

Note: In PrimeNG 17 this problem no longer exists

[adcore-dev]

@jschu
Hey, but this workaround stop working when you add other template to component:

PrimeNG 17, not an option for now, it require Angular 17, which require Node 18.

[jschu]

this seems like a specific problem with the template itemtogglericon
I could not find a solution for this specific case
with other templates, the workaround works

[cetincakiroglu]

Hi,

This issue is already fixed and cannot be replicated with the latest version. Could you please share a stackblitz example if it still exists?

[adcore-dev]

Hi,
In 17.x.x problem resolved
In 16.x.x problem exist

[Gabrielfch]

Hola la forma de resolverlo en la version 16.9.1
<ng-template let-node pTemplate="default"> <span>{{node.label}}</span> </ng-template>

[ldv-orbyta]

Hola la forma de resolverlo en la version 16.9.1 <ng-template let-node pTemplate="default"> <span>{{node.label}}</span> </ng-template>

Not working in my case with the same primeNG version. The templating doesn't work at all

[ldv-orbyta]

<div class="flex flex-column gap-2">
  <label>{{ label }}</label>
  <p-treeSelect
    class="w-full"
    containerStyleClass="w-full"
    [filter]="true"
    [(ngModel)]="selectedNodes"
    [options]="options"
    selectionMode="single"
    [showClear]="true"
    [emptyMessage]="'EMPTY_MESSAGE' | translate"
    [placeholder]="'SELECT_ITEM' | translate"
  >
    <ng-template let-node pTemplate="node">
      NOT WORKING
    </ng-template>
  </p-treeSelect>
</div>

I still see these counter at the end!
Version 16.9.1

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,