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

   1 import { Component, forwardRef, Input } from '@angular/core'
   2 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
   3
   4 export type SelectOptionsItem = {
   5   id: string | number
   6   label: string
   7   description?: string
   8   group?: string
   9   groupLabel?: string
  10 }
  11
  12 @Component({
  13   selector: 'my-select-options',
  14   styleUrls: [ './select-shared.component.scss' ],
  15   templateUrl: './select-options.component.html',
  16   providers: [
  17     {
  18       provide: NG_VALUE_ACCESSOR,
  19       useExisting: forwardRef(() => SelectOptionsComponent),
  20       multi: true
  21     }
  22   ]
  23 })
  24 export class SelectOptionsComponent implements ControlValueAccessor {
  25   @Input() items: SelectOptionsItem[] = []
  26   @Input() clearable = false
  27   @Input() searchable = false
  28   @Input() groupBy: string
  29   @Input() labelForId: string
  30   @Input() searchFn: any
  31
  32   selectedId: number | string
  33
  34   propagateChange = (_: any) => { /* empty */ }
  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 }