I’m using Prime NG Multiselect component and I want to show selectedItemsLabel="{0} Selected" when there are more than 3 selected checkboxes, but if all of the checkboxes are selected, then selectedItemsLabel="All" should be shown in the placeholder.
I’m new to angular and I been following documentation of this MultiSelect component, yet this doesn’t show the options to able to implement multiple conditions of properties, and I was wondering if it’s even possible.
Example of how It might be
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect
[ngModel]="value"
[options]="routeOptions"
placeholder="Any"
(onChange)="filter($event.value)"
optionLabel="name"
selectedItemsLabel="{0} selected"
[maxSelectedLabels]="3"
>
<ng-template let-option pTemplate="item">
<div>
<span class="p-ml-1">{{ option.name }}</span>
</div>
<div *ngIf="[maxSelectedLabels="routeOptions.length - 1"] Then selectedItemsLabel="All"></div>
</ng-template>
</p-multiSelect>
</ng-template>
2
Answers
I made a Stackblitz of the problem: https://stackblitz.com/edit/primeng-tablefilter-demo-ipt7y1?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
(Expand the page to the left to view the column filter in the stackblitz)
If you notice, the clear button doesn't clear the selected textbox anymore. After some testing it seems the [(ngModel)] breaks it, I think it got to do something with two-way binding? It is not shown in the stackblitz, but if you include
the clear button still clears the filter from the table, but not in the selected textbox.
I found out that there is this property
That adds an X at the end of the textbox that clears it out. Sadly, the styling/positioning is not what I need.
What could be the ways to fix the clear button ? Add a ts function to clear out the selected values? If so, how to bind it to the clear button because it is generated from
menu property and I had no luck to find the way to try add/change functionality to that button.
Yes, you can. First give the component a ref with # like this:
Then you have access to it:
If the option of
maxSelectedLables
is the length – 1 of routeOptions then thediv
is visible. That is how ngIf worksBUT
Thats not what you want. You wanna set the
selectedItemsLabel
property. And you have it not understand correctly. You set themaxSelectedLables
to 3 as example AND set theselectedItemsLabel
directly, too! The text of theselectedItemsLabel
will be only shown if needed (controlled by the component).Look here the Stackblitz!
The documentation of
ng-prime
will helps, too and say:UPDATE 18.02.2023
You wanna show "ALL" only if all items selected. So add the
onChange
event and bind the selectedItemsLabel. Why binding? It has some problems with a condition in it. So we make it inside the code.HTML
Inside the code do the follow with
onChange
:Code
Now it works how you wish. One important thing: We use
changeRef.detectChanges();
Without this the components selected text will not changing directly. Import it in the components constructor: