CODEWITHSUNDEEP
angularprimengmulti-select
user749798
user749798

Reputation: 5370

Open multiselect with another button (primeng, angular)

Is there a way to open a primeng multiselect using another button?

I've tried triggering by clicking on the nativeElement, but that has not worked.

Below is my component:

<div>
  <button class="btn btn-primary" #filterButton (click)="openMultiselect()">Trigger remotely</button>
</div>

<div class="ui-g">
  <div class="ui-g-6 ui-fluid">
    <p-multiSelect [options]="cities1" [(ngModel)]="selectedCities1"></p-multiSelect>
  </div>
</div>

And TS:

@ViewChild(MultiSelect) filterButton: MultiSelect;

  openMultiselect() {
    this.filterButton.el.nativeElement.click()
  }

And stackblitz: https://stackblitz.com/edit/ngprime-multiselect-azdsh4

Upvotes: 1

Views: 4105

Answers (2)

Sreepal
Sreepal

Reputation: 59

Typescript
@ViewChild('refMulSel') refMulSel: MultiSelect

 toggleMulSel: boolean = false;
  openMulSel(e) {
    this.toggleMulSel = !this.toggleMulSel;
    if (this.toggleMulSel) {
      this.refMulSel.show();
    } else {
      this.refMulSel.hide();
    }`enter code here`

    e.stopPropagation();
  }
Html
<span (click)="openMulSel($event)" >Open</span>
<p-multiSelect  #refMulSel></p-multiSelect>

Upvotes: 3

yurzui
yurzui

Reputation: 214017

There are two steps you need to do to achieve it:

  • call public MultiSelect::show method

  • stop propagation of event in order to prevent closing dialog during the same action

html

<button (click)="openMultiselect($event)" ...

ts

@ViewChild(MultiSelect) multiSelect: MultiSelect;

openMultiselect(e) {
  this.multiSelect.show();
  e.stopPropagation();
}

Forked Stackblitz

Upvotes: 3

Related Questions