feat: add add, remove, clear events

README.md

@@ -115,6 +115,9 @@ map: {
 | (change)  | Fired on selected value change |
 | (open)  | Fired on select dropdown open |
 | (close)  | Fired on select dropdown close |
+| (clear)  | Fired on clear icon click |
+| (add)  | Fired when item is selected |
+| (remove)  | Fired when item is removed |
 
 ## Change Detection
 Ng-select component implements `OnPush` change detection which means the dirty checking checks for immutable 

demo/app/examples/events.component.ts

@@ -1,4 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { DataService } from '../shared/data.service';
 
 
 interface AngSelectEvent {
@@ -10,18 +11,20 @@ interface AngSelectEvent {
     selector: 'select-events',
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
-        <div id="s1"></div>
-        <label>Open, close, focus, blur, change events</label>
         ---html,true
-        <ng-select snippet="s1"
-                   [items]="cities"
-                   [(ngModel)]="selectedCity"
+        <ng-select placeholder="Select some items"
+                   [items]="items"
+                   [(ngModel)]="selectedItems"
                    bindLabel="name"
                    bindValue="id"
+                   [multiple]="true"
                    (open)="onOpen()"
                    (close)="onClose()"
                    (focus)="onFocus($event)"
                    (blur)="onBlur($event)"
+                   (clear)="onClear()"
+                   (add)="onAdd($event)"
+                   (remove)="onRemove($event)"
                    (change)="onChange($event)">
         </ng-select>
         ---
@@ -41,15 +44,17 @@ interface AngSelectEvent {
 })
 export class SelectEventsComponent {
 
-    selectedCity: any;
-    cities = [
-        {id: 1, name: 'Vilnius'},
-        {id: 2, name: 'Kaunas'},
-        {id: 3, name: 'Pavilnys', disabled: true}
-    ];
+    selectedItems: any;
+    items = [];
 
     events: AngSelectEvent[] = [];
 
+    constructor(private dataService: DataService) {
+        this.dataService.getPeople().subscribe(items => {
+            this.items = items;
+        });
+    }
+
     onChange($event) {
         this.events.push({name: '(change)', value: $event});
     }
@@ -69,6 +74,18 @@ export class SelectEventsComponent {
     onClose() {
         this.events.push({name: '(close)', value: null});
     }
+
+    onAdd($event) {
+        this.events.push({name: '(add)', value: $event});
+    }
+
+    onRemove($event) {
+        this.events.push({name: '(remove)', value: $event});
+    }
+
+    onClear() {
+        this.events.push({name: '(clear)', value: null});
+    }
 }
 
 

src/ng-select/ng-select.component.spec.ts

@@ -907,6 +907,61 @@ describe('NgSelectComponent', function () {
 
             expect(fixture.componentInstance.onChange).toHaveBeenCalledTimes(1);
         }));
+
+        it('fire add when item is added', fakeAsync(() => {
+            const fixture = createTestingModule(
+                NgSelectEventsTestCmp,
+                `<ng-select [items]="cities"
+                            (add)="onAdd($event)"
+                            [multiple]="true"
+                            [(ngModel)]="selectedCity">
+                </ng-select>`);
+
+            spyOn(fixture.componentInstance, 'onAdd');
+
+            tickAndDetectChanges(fixture);
+            fixture.componentInstance.select.select(fixture.componentInstance.cities[0]);
+
+            expect(fixture.componentInstance.onAdd).toHaveBeenCalledWith(fixture.componentInstance.cities[0]);
+        }));
+
+        it('fire remove when item is removed', fakeAsync(() => {
+            const fixture = createTestingModule(
+                NgSelectEventsTestCmp,
+                `<ng-select [items]="cities"
+                            (remove)="onRemove($event)"
+                            [multiple]="true"
+                            [(ngModel)]="selectedCity">
+                </ng-select>`);
+
+            spyOn(fixture.componentInstance, 'onRemove');
+
+            fixture.componentInstance.selectedCities = [fixture.componentInstance.cities[0]];
+            tickAndDetectChanges(fixture);
+
+            fixture.componentInstance.select.unselect(fixture.componentInstance.cities[0]);
+
+            expect(fixture.componentInstance.onRemove).toHaveBeenCalledWith(fixture.componentInstance.cities[0]);
+        }));
+
+        it('fire clear when model is cleared using clear icon', fakeAsync(() => {
+            const fixture = createTestingModule(
+                NgSelectEventsTestCmp,
+                `<ng-select [items]="cities"
+                            (clear)="onClear($event)"
+                            [multiple]="true"
+                            [(ngModel)]="selectedCity">
+                </ng-select>`);
+
+            spyOn(fixture.componentInstance, 'onClear');
+
+            fixture.componentInstance.selectedCities = [fixture.componentInstance.cities[0]];
+            tickAndDetectChanges(fixture);
+            fixture.componentInstance.select.handleClearClick(<any>{ stopPropagation: () => { } });
+            tickAndDetectChanges(fixture);
+
+            expect(fixture.componentInstance.onClear).toHaveBeenCalled();
+        }));
     });
 
     describe('Clear icon click', () => {
@@ -1187,6 +1242,7 @@ class NgSelectFilterTestCmp {
 class NgSelectEventsTestCmp {
     @ViewChild(NgSelectComponent) select: NgSelectComponent;
     selectedCity: { id: number; name: string };
+    selectedCities: Array<{ id: number; name: string }>;
     cities = [
         { id: 1, name: 'Vilnius' },
         { id: 2, name: 'Kaunas' },
@@ -1207,4 +1263,12 @@ class NgSelectEventsTestCmp {
 
     onClose() {
     }
+
+    onAdd() {
+    }
+
+    onRemove() {
+    }
+
+    onClear() {}
 }

src/ng-select/ng-select.component.ts

@@ -89,6 +89,9 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
     @Output('open') openEvent = new EventEmitter();
     @Output('close') closeEvent = new EventEmitter();
     @Output('search') searchEvent = new EventEmitter();
+    @Output('clear') clearEvent = new EventEmitter();
+    @Output('add') addEvent = new EventEmitter();
+    @Output('remove') removeEvent = new EventEmitter();
 
     @HostBinding('class.ng-single')
     get single() {
@@ -204,6 +207,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
         if (this.isTypeahead) {
             this.typeahead.next(null);
         }
+        this.clearEvent.emit();
     }
 
     // TODO: make private 
@@ -280,6 +284,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
             this.itemsList.select(item);
             this.clearSearch();
             this.updateModel();
+            this.addEvent.emit(item);
         }
 
         if (this.single) {
@@ -290,6 +295,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
     unselect(item: NgOption) {
         this.itemsList.unselect(item);
         this.updateModel();
+        this.removeEvent.emit(item);
     }
 
     selectTag() {