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

   1 import { Component, forwardRef, HostListener, Input } from '@angular/core'
   2 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
   3 import { SelectOptionsItem } from '../../../../types/select-options-item.model'
   4
   5 @Component({
   6   selector: 'my-select-options',
   7   styleUrls: [ './select-shared.component.scss' ],
   8   templateUrl: './select-options.component.html',
   9   providers: [
  10     {
  11       provide: NG_VALUE_ACCESSOR,
  12       useExisting: forwardRef(() => SelectOptionsComponent),
  13       multi: true
  14     }
  15   ]
  16 })
  17 export class SelectOptionsComponent implements ControlValueAccessor {
  18   @Input() items: SelectOptionsItem[] = []
  19   @Input() clearable = false
  20   @Input() searchable = false
  21   @Input() groupBy: string
  22   @Input() labelForId: string
  23   @Input() searchFn: any
  24
  25   selectedId: number | string
  26   disabled = false
  27
  28   propagateChange = (_: any) => { /* empty */ }
  29
  30   // Allow plugins to update our value
  31   @HostListener('change', [ '$event.target' ])
  32   handleChange (event: any) {
  33     this.writeValue(event.value)
  34     this.onModelChange()
  35   }
  36
  37   writeValue (id: number | string) {
  38     this.selectedId = id
  39   }
  40
  41   registerOnChange (fn: (_: any) => void) {
  42     this.propagateChange = fn
  43   }
  44
  45   registerOnTouched () {
  46     // Unused
  47   }
  48
  49   onModelChange () {
  50     this.propagateChange(this.selectedId)
  51   }
  52
  53   setDisabledState (isDisabled: boolean) {
  54     this.disabled = isDisabled
  55   }
  56 }