feat($browser): add the select and remove events

#14
optimistex · Feb 8, 2018 · 93cd4be · 93cd4be
1 parent 7904729
commit 93cd4be
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -52,7 +52,7 @@ Native Angular component for Select
 4. Add the tag `<ngx-select>` into some html
 
     ```html
-    <ngx-select [items]="items" [(ngModel)]="itemId">
+    <ngx-select [items]="items" [(ngModel)]="itemId"></ngx-select>
     ```
 
 5. More information regarding of using **ngx-select-ex** is located in [demo](https://optimistex.github.io/ngx-select-ex/).
@@ -83,6 +83,27 @@ Any item can be `disabled` for prevent selection. For disable an item add the pr
 | (blur)  | Fired on select blur |
 | (open)  | Fired on select dropdown open |
 | (close)  | Fired on select dropdown close |
+| (select)  | Fired on an item selected by user. Returns value of the selected item. |
+| (remove)  | Fired on an item removed by user. Returns value of the removed item. |
+
+**Warning!** Although the component contains the `select` and the `remove` events, the better solution is using `valueChanches` of the `FormControl`.
+
+```typescript
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+
+@Component({
+    selector: 'app-example',
+    template: `<ngx-select [items]="['111', '222']" [formControl]="selectControl"></ngx-select>`
+})
+class ExampleComponent {
+    public selectControl = new FormControl();
+    
+    constructor() {
+        this.selectControl.valueChanges.subscribe(value => console.log(value));
+    }
+}
+```
 
 ### Styles and customization
 

diff --git a/src/app/demo/select/single-demo.html b/src/app/demo/select/single-demo.html
@@ -10,7 +10,9 @@ <h3>Select a single city</h3>
                     (focus)="doFocus()"
                     (blur)="doBlur()"
                     (open)="doOpen()"
-                    (close)="doClose()">
+                    (close)="doClose()"
+                    (select)="doSelect($event)"
+                    (remove)="doRemove($event)">
         </ngx-select>
         <p></p>
         <div class="alert alert-secondary">

diff --git a/src/app/demo/select/single-demo.ts b/src/app/demo/select/single-demo.ts
@@ -61,4 +61,12 @@ export class SingleDemoComponent implements OnDestroy {
     public doClose() {
         console.log('SingleDemoComponent.doClose');
     }
+
+    public doSelect(value: any) {
+        console.log('SingleDemoComponent.doSelect', value);
+    }
+
+    public doRemove(value: any) {
+        console.log('SingleDemoComponent.doRemove', value);
+    }
 }
diff --git a/src/app/doc.md b/src/app/doc.md
@@ -69,6 +69,27 @@ Any item can be `disabled` for prevent selection. For disable an item add the pr
 | (blur)  | Fired on select blur |
 | (open)  | Fired on select dropdown open |
 | (close)  | Fired on select dropdown close |
+| (select)  | Fired on an item selected by user. Returns value of the selected item. |
+| (remove)  | Fired on an item removed by user. Returns value of the removed item. |
+
+**Warning!** Although the component contains the `select` and the `remove` events, the better solution is using `valueChanches` of the `FormControl`.
+
+```typescript
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+
+@Component({
+    selector: 'app-example',
+    template: `<ngx-select [items]="['111', '222']" [formControl]="selectControl"></ngx-select>`
+})
+class ExampleComponent {
+    public selectControl = new FormControl();
+    
+    constructor() {
+        this.selectControl.valueChanges.subscribe(value => console.log(value));
+    }
+}
+```
 
 ### Styles and customization
 

diff --git a/src/app/lib/ngx-select/ngx-select.component.spec.ts b/src/app/lib/ngx-select/ngx-select.component.spec.ts
@@ -27,7 +27,9 @@ import createSpy = jasmine.createSpy;
                     (focus)="select1.doFocus()"
                     (blur)="select1.doBlur()"
                     (open)="select1.doOpen()"
-                    (close)="select1.doClose()"></ngx-select>
+                    (close)="select1.doClose()"
+                    (select)="select1.doSelect($event)"
+                    (remove)="select1.doRemove($event)"></ngx-select>
         <ngx-select id="sel-2" #component2
                     [formControl]="select2.formControl"
                     [defaultValue]="select2.defaultValue"
@@ -39,7 +41,9 @@ import createSpy = jasmine.createSpy;
                     [optGroupOptionsField]="select2.optGroupOptionsField"
                     [multiple]="select2.multiple"
                     [noAutoComplete]="select2.noAutoComplete"
-                    [items]="select2.items"></ngx-select>
+                    [items]="select2.items"
+                    (select)="select2.doSelect($event)"
+                    (remove)="select2.doRemove($event)"></ngx-select>
     `
 })
 class TestNgxSelectComponent {
@@ -65,7 +69,9 @@ class TestNgxSelectComponent {
         doFocus: () => null,
         doBlur: () => null,
         doOpen: () => null,
-        doClose: () => null
+        doClose: () => null,
+        doSelect: () => null,
+        doRemove: () => null
     };
 
     public select2: any = {
@@ -80,7 +86,10 @@ class TestNgxSelectComponent {
         optGroupOptionsField: 'options',
         multiple: false,
         noAutoComplete: false,
-        items: []
+        items: [],
+
+        doSelect: () => null,
+        doRemove: () => null
     };
 }
 
@@ -551,8 +560,12 @@ describe('NgxSelectComponent', () => {
     });
 
     describe('should remove selected', () => {
+        let doSelect, doRemove;
+
         describe('from select with ngModel', () => {
             beforeEach(() => {
+                doSelect = spyOn(fixture.componentInstance.select1, 'doSelect');
+                doRemove = spyOn(fixture.componentInstance.select1, 'doRemove');
                 fixture.componentInstance.select1.items = items1;
                 fixture.componentInstance.select1.allowClear = true;
                 fixture.detectChanges();
@@ -565,7 +578,7 @@ describe('NgxSelectComponent', () => {
             });
 
             it('a single item', () => {
-                el(1).querySelector('.btn-link').click();
+                el(1).querySelector('.ngx-select__clear').click();
                 fixture.detectChanges();
                 expect(selectedItem(1)).toBeFalsy();
                 expect(fixture.componentInstance.select1.value).toEqual(null);
@@ -579,10 +592,19 @@ describe('NgxSelectComponent', () => {
                 expect(selectedItems(1).length).toBe(0);
                 expect(fixture.componentInstance.select1.value).toEqual([]);
             });
+
+            afterEach(() => {
+                expect(doSelect).toHaveBeenCalledTimes(1);
+                expect(doSelect).toHaveBeenCalledWith(0);
+                expect(doRemove).toHaveBeenCalledTimes(1);
+                expect(doRemove).toHaveBeenCalledWith(0);
+            });
         });
 
         describe('from select with FormControl', () => {
             beforeEach(() => {
+                doSelect = spyOn(fixture.componentInstance.select2, 'doSelect');
+                doRemove = spyOn(fixture.componentInstance.select2, 'doRemove');
                 fixture.componentInstance.select2.items = items1;
                 fixture.componentInstance.select2.allowClear = true;
                 fixture.detectChanges();
@@ -595,7 +617,7 @@ describe('NgxSelectComponent', () => {
             });
 
             it('a single item', () => {
-                el(2).querySelector('.btn-link').click();
+                el(2).querySelector('.ngx-select__clear').click();
                 fixture.detectChanges();
                 expect(selectedItem(2)).toBeFalsy();
                 expect(fixture.componentInstance.select2.formControl.value).toEqual(null);
@@ -609,6 +631,13 @@ describe('NgxSelectComponent', () => {
                 expect(selectedItems(2).length).toBe(0);
                 expect(fixture.componentInstance.select2.formControl.value).toEqual([]);
             });
+
+            afterEach(() => {
+                expect(doSelect).toHaveBeenCalledTimes(1);
+                expect(doSelect).toHaveBeenCalledWith(0);
+                expect(doRemove).toHaveBeenCalledTimes(1);
+                expect(doRemove).toHaveBeenCalledWith(0);
+            });
         });
     });
 

diff --git a/src/app/lib/ngx-select/ngx-select.component.ts b/src/app/lib/ngx-select/ngx-select.component.ts
@@ -65,6 +65,8 @@ export class NgxSelectComponent implements ControlValueAccessor, DoCheck, AfterC
     @Output() public blur = new EventEmitter<void>();
     @Output() public open = new EventEmitter<void>();
     @Output() public close = new EventEmitter<void>();
+    @Output() public select = new EventEmitter<any>();
+    @Output() public remove = new EventEmitter<any>();
 
     @ViewChild('main') protected mainElRef: ElementRef;
     @ViewChild('input') protected inputElRef: ElementRef;
@@ -336,6 +338,7 @@ export class NgxSelectComponent implements ControlValueAccessor, DoCheck, AfterC
         }
         if (!option.disabled) {
             this.subjOptionsSelected.next((this.multiple ? this.subjOptionsSelected.value : []).concat([option]));
+            this.select.emit(option.value);
             this.optionsClose(true);
             this.onTouched();
         }
@@ -345,6 +348,7 @@ export class NgxSelectComponent implements ControlValueAccessor, DoCheck, AfterC
         if (!this.disabled) {
             event.stopPropagation();
             this.subjOptionsSelected.next((this.multiple ? this.subjOptionsSelected.value : []).filter(o => o !== option));
+            this.remove.emit(option.value);
         }
     }