0

In primeNg multiselect I'm unselecting the items from ts file, I can able to unselect but this will not gets updated in the input field.

someComponent.html

<p-multiSelect [options]="cities1" maxSelectedLabels=0 selectedItemsLabel="{0} 
items selected" [(ngModel)]="selectedCities1"></p-multiSelect>
<div *ngFor="let city in selectedCities1 let i=index">
  <button (click)="delete(i)">{{city}}</button>
</div>

someComponent.ts

delete(i){
//using splice method to remove item from selectedCities1 array
}

Question is when I select and unselect from dropdown I am able to see the output like "1 item selected" "2 item selected" etc and vice-versa.

enter image description here

But when I do it from delete function I can unselect dropdown but unable to update the defaultLabel with "1 item selected" "2 item selected" etc and vice-versa.

enter image description here

Tried very much and searched in all primeng Q&A but unable to find answer.

pjay
  • 385
  • 1
  • 3
  • 19

1 Answers1

4

It's weird since the writeValue should be called if you use the splice.

you can try the slice after the item removed. This will create a new array:

this.selectedCities1 = this.selectedCities1.slice();

But here is a hack:

<p-multiSelect #sel [options]="cities1" maxSelectedLabels=0 selectedItemsLabel="{0} 
items selected" [(ngModel)]="selectedCities1"></p-multiSelect>
<div *ngFor="let city in selectedCities1 let i=index">
  <button (click)="delete(i);sel.updateLabel()">{{city}}</button>
</div>

I hope it helps!

tano
  • 2,657
  • 1
  • 15
  • 16
  • Awsome tano.. But they not mentioned anywhere about this updateLabel() in the documentation. Thanks anyways. – pjay Nov 08 '19 at 10:07
  • After upgrading to latest version this no longer seems to work. Is there an alternative in doing this in version 15.1.1 of prime? – CriPstian Jan 24 '23 at 11:17