Merge pull request #12516 from primefaces/issue-12460

Fixed #12460 - MultiSelect: Add event onRemove
primefaces · Jan 18, 2023 · fb02073 · fb02073
2 parents fb5f6c7 + 48471a5
commit fb02073
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts
@@ -43,6 +43,11 @@ export interface MultiSelectFilterOptions {
     reset?: () => void;
 }
 
+export interface MultiselectOnRemoveEvent {
+    newValue: object;
+    removed: MultiSelectItem;
+}
+
 @Component({
     selector: 'p-multiSelectItem',
     template: `
@@ -444,6 +449,8 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
 
     @Output() onLazyLoad: EventEmitter<any> = new EventEmitter();
 
+    @Output() onRemove: EventEmitter<MultiselectOnRemoveEvent> = new EventEmitter();
+
     /* @deprecated */
     _autoZIndex: boolean;
     @Input() get autoZIndex(): boolean {
@@ -724,6 +731,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
         let selectionIndex = this.findSelectionIndex(optionValue);
         if (selectionIndex != -1) {
             this.value = this.value.filter((val, i) => i != selectionIndex);
+            this.onRemove.emit({ newValue: this.value, removed: optionValue });
 
             if (this.selectionLimit) {
                 this.maxSelectionLimitReached = false;

diff --git a/src/app/showcase/components/multiselect/multiselectdemo.html b/src/app/showcase/components/multiselect/multiselectdemo.html
@@ -700,6 +700,11 @@ <h5>Events</h5>
                             </td>
                             <td>Callback to invoke in lazy mode to load new data.</td>
                         </tr>
+                        <tr>
+                            <td>onRemove</td>
+                            <td>event: MultiselectOnRemoveEvent</td>
+                            <td>Callback to invoke in lazy mode to load new data.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>

diff --git a/src/app/showcase/components/multiselect/multiselectdemo.ts b/src/app/showcase/components/multiselect/multiselectdemo.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { CountryService } from '../../service/countryservice';
 import { SelectItemGroup } from 'primeng/api';
+import { CountryService } from '../../service/countryservice';
 
 interface City {
     name: string;