client/src/app/shared/shared-forms/select-options.component.ts

   1 import { Component, Input, forwardRef } from '@angular/core'
   2 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'
   3
   4 export type SelectOptionsItem = { id: number | string, label: string, description?: string }
   5
   6 @Component({
   7   selector: 'my-select-options',
   8   styleUrls: [ './select-shared.component.scss' ],
   9   templateUrl: './select-options.component.html',
  10   providers: [
  11     {
  12       provide: NG_VALUE_ACCESSOR,
  13       useExisting: forwardRef(() => SelectOptionsComponent),
  14       multi: true
  15     }
  16   ]
  17 })
  18 export class SelectOptionsComponent implements ControlValueAccessor {
  19   @Input() items: SelectOptionsItem[] = []
  20   @Input() clearable = false
  21   @Input() searchable = false
  22   @Input() bindValue = 'id'
  23   @Input() groupBy: string
  24
  25   selectedId: number | string
  26
  27   // ng-select options
  28   bindLabel = 'label'
  29
  30   propagateChange = (_: any) => { /* empty */ }
  31
  32   writeValue (id: number | string) {
  33     this.selectedId = id
  34   }
  35
  36   registerOnChange (fn: (_: any) => void) {
  37     this.propagateChange = fn
  38   }
  39
  40   registerOnTouched () {
  41     // Unused
  42   }
  43
  44   onModelChange () {
  45     this.propagateChange(this.selectedId)
  46   }
  47 }