触发primeng多选对话框关闭的事件

Question

I am trying to use primeng multiselect component. I want to get all the selected values as soon as the user dismisses the multiselect dropdown. Is there a way to do it? I know we have onChange() event but it triggers every time user selects or deselects a value from the list. I want to trigger it when the user is done selecting the values.

Answer 1

As primeng does not provide any api to achieve what you need directly, here is one way i am able to do it.

your.component.html

<p-multiSelect #ms [options]="cars" [(ngModel)]="selectedCars"></p-multiSelect>

your.component.ts

import { Renderer} from '@angular/core';
import {MultiSelect} from 'primeng/primeng';

@ViewChild('ms') multiselect: MultiSelect;

constructor(private renderer  :Renderer) {}

ngOnInit(){
     this.renderer.listenGlobal('document', 'click', ()=> {
        if (!this.multiselect.selfClick && !this.multiselect.panelClick && this.multiselect.overlayVisible) {
          console.log('multiselect will hide'); // write code here to execute when multiselect overlay get dismissed/hidden
          // this.selectedCars will have all the selected values.
        }
    });
}

Primeng use same logic to dismiss multiselect overlay when user click anywhere other than multiselect itself. If in the future primeng provide direct way of achieving the desired result , you may not need to use this work around.