Adding filter and supporting up/down arrows

src/components/selectorModal.component.pug

@@ -1,8 +1,15 @@
 .modal-body
+    .input-group.mb-4
+        .input-group-prepend
+            .input-group-text
+                i.fas.fa-fw.fa-search
+        input.form-control(type='search', placeholder='Search', [(ngModel)]='shellFilter', (ngModelChange)='onSearch()')
+
     .list-group
         a.list-group-item.list-group-item-action(
-            *ngFor='let item of items; let i = index', 
-            (click)='modalInstance.close(item)'
-        ) 
+            *ngFor='let item of filteredItems; let i = index',
+            (click)='modalInstance.close(item)',
+            [class.active]='selectedOption == i'
+        )
             strong.mr-2(*ngIf='i < 10') {{i}}
             span {{item.name}}

src/components/selectorModal.component.ts

@@ -12,15 +12,44 @@ export interface Item {
 })
 export class SelectorModalComponent {
     @Input() items: Item[]
+    shellFilter = '';
+    filteredItems: Item[]
+    selectedOption = 0
 
     constructor (
         public modalInstance: NgbActiveModal,
     ) { }
 
+    ngOnInit() {
+        this.filteredItems = this.items
+    }
+
+    onSearch() {
+        this.filteredItems = Object.assign([], this.items).filter(
+            item => item.name.toLowerCase().indexOf(this.shellFilter.toLowerCase()) > -1
+        )
+        this.selectedOption = 0
+    }
+
     @HostListener(`document:keyup`, ['$event']) onKey ($event: KeyboardEvent) {
         if ($event.key >= '0' && $event.key <= '9') {
             let index = $event.key.charCodeAt(0) - '0'.charCodeAt(0)
-            this.modalInstance.close(this.items[index])
+            if (index < this.filteredItems.length) {
+                this.modalInstance.close(this.filteredItems[index])
+            }
+        } else if ($event.key == 'Enter') {
+            if (this.selectedOption < this.filteredItems.length) {
+                this.modalInstance.close(this.filteredItems[this.selectedOption])
+            }
+        }
+        else if ($event.key == 'ArrowDown' ) {
+            if (this.selectedOption < this.filteredItems.length - 1) {
+                this.selectedOption++
+            }
+        } else if ($event.key == 'ArrowUp') {
+            if (this.selectedOption > 0) {
+                this.selectedOption--
+            }
         }
     }
 

src/index.ts

@@ -6,11 +6,13 @@ import { ButtonProvider } from './buttonProvider'
 import { SelectorModalComponent } from './components/selectorModal.component'
 import { ShellSelectorConfigProvider } from './config'
 import { ShellSelectorHotkeyProvider } from './hotkeys'
+import { FormsModule } from '@angular/forms'
 
 @NgModule({
     imports: [
         NgbModule,
         CommonModule,
+        FormsModule
     ],
     providers: [
         { provide: ToolbarButtonProvider, useClass: ButtonProvider, multi: true },