vendure/docs/docs/reference/admin-ui-api/components/facet-value-selector-component.md

---

title: "FacetValueSelectorComponent" weight: 10 date: 2023-07-26T19:00:03.205Z showtoc: true

generated: true

import MemberInfo from '@site/src/components/MemberInfo'; import GenerationInfo from '@site/src/components/GenerationInfo'; import MemberDescription from '@site/src/components/MemberDescription';

FacetValueSelectorComponent

A form control for selecting facet values.

Example

<vdr-facet-value-selector
  [facets]="facets"
  (selectedValuesChange)="selectedValues = $event"
></vdr-facet-value-selector>

The facets input should be provided from the parent component like this:

Example

this.facets = this.dataService
  .facet.getAllFacets()
  .mapSingle(data => data.facets.items);

class FacetValueSelectorComponent implements OnInit, OnDestroy, ControlValueAccessor {
  @Output() @Output() selectedValuesChange = new EventEmitter<FacetValueFragment[]>();
  @Input() @Input() readonly = false;
  @Input() @Input() transformControlValueAccessorValue: (value: FacetValueFragment[]) => any[] = value => value;
  searchInput$ = new Subject<string>();
  searchLoading = false;
  searchResults$: Observable<FacetValueFragment[]>;
  selectedIds$ = new Subject<string[]>();
  onChangeFn: (val: any) => void;
  onTouchFn: () => void;
  disabled = false;
  value: Array<string | FacetValueFragment>;
  constructor(dataService: DataService, changeDetectorRef: ChangeDetectorRef)
  ngOnInit() => void;
  ngOnDestroy() => ;
  onChange(selected: FacetValueFragment[]) => ;
  registerOnChange(fn: any) => ;
  registerOnTouched(fn: any) => ;
  setDisabledState(isDisabled: boolean) => void;
  focus() => ;
  writeValue(obj: string | FacetValueFragment[] | Array<string | number> | null) => void;
}

• Implements: OnInit, OnDestroy, ControlValueAccessor

### selectedValuesChange ### readonly ### transformControlValueAccessorValue ### searchInput$ ### searchLoading ### searchResults$ ### selectedIds$ ### onChangeFn ### onTouchFn ### disabled ### value ### constructor DataService, changeDetectorRef: ChangeDetectorRef) => FacetValueSelectorComponent`} /> ### ngOnInit void`} /> ### ngOnDestroy `} /> ### onChange `} /> ### registerOnChange `} /> ### registerOnTouched `} /> ### setDisabledState void`} /> ### focus `} /> ### writeValue void`} />