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
  27   propagateChange = (_: any) => { /* empty */ }
  28
  29   // Allow plugins to update our value
  30   @HostListener('change', [ '$event.target' ])
  31   handleChange (event: any) {
  32     this.writeValue(event.value)
  33     this.onModelChange()
  34   }
  35
  36   writeValue (id: number | string) {
  37     this.selectedId = id
  38   }
  39
  40   registerOnChange (fn: (_: any) => void) {
  41     this.propagateChange = fn
  42   }
  43
  44   registerOnTouched () {
  45     // Unused
  46   }
  47
  48   onModelChange () {
  49     this.propagateChange(this.selectedId)
  50   }
  51 }