facet-value-selector-component.md 4.8 KB
title: "FacetValueSelectorComponent" weight: 10 date: 2023-07-14T16:57:51.224Z showtoc: true
generated: true
FacetValueSelectorComponent
# FacetValueSelectorComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/components/facet-value-selector/facet-value-selector.component.ts" sourceLine="42" packageName="@vendure/admin-ui">}}
A form control for selecting facet values.
*Example*
```HTML
```
The `facets` input should be provided from the parent component
like this:
*Example*
```TypeScript
this.facets = this.dataService
.facet.getAllFacets()
.mapSingle(data => data.facets.items);
```
## Signature
```TypeScript
class FacetValueSelectorComponent implements OnInit, OnDestroy, ControlValueAccessor {
@Output() @Output() selectedValuesChange = new EventEmitter();
@Input() @Input() readonly = false;
@Input() @Input() transformControlValueAccessorValue: (value: FacetValueFragment[]) => any[] = value => value;
searchInput$ = new Subject();
searchLoading = false;
searchResults$: Observable;
selectedIds$ = new Subject();
onChangeFn: (val: any) => void;
onTouchFn: () => void;
disabled = false;
value: Array;
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 | null) => void;
}
```
## Implements
* OnInit
* OnDestroy
* ControlValueAccessor
## Members
### selectedValuesChange
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### readonly
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### transformControlValueAccessorValue
{{< member-info kind="property" type="(value: FacetValueFragment[]) => any[]" >}}
{{< member-description >}}{{< /member-description >}}
### searchInput$
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### searchLoading
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### searchResults$
{{< member-info kind="property" type="Observable<FacetValueFragment[]>" >}}
{{< member-description >}}{{< /member-description >}}
### selectedIds$
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### onChangeFn
{{< member-info kind="property" type="(val: any) => void" >}}
{{< member-description >}}{{< /member-description >}}
### onTouchFn
{{< member-info kind="property" type="() => void" >}}
{{< member-description >}}{{< /member-description >}}
### disabled
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### value
{{< member-info kind="property" type="Array<string | FacetValueFragment>" >}}
{{< member-description >}}{{< /member-description >}}
### constructor
{{< member-info kind="method" type="(dataService: DataService, changeDetectorRef: ChangeDetectorRef) => FacetValueSelectorComponent" >}}
{{< member-description >}}{{< /member-description >}}
### ngOnInit
{{< member-info kind="method" type="() => void" >}}
{{< member-description >}}{{< /member-description >}}
### ngOnDestroy
{{< member-info kind="method" type="() => " >}}
{{< member-description >}}{{< /member-description >}}
### onChange
{{< member-info kind="method" type="(selected: FacetValueFragment[]) => " >}}
{{< member-description >}}{{< /member-description >}}
### registerOnChange
{{< member-info kind="method" type="(fn: any) => " >}}
{{< member-description >}}{{< /member-description >}}
### registerOnTouched
{{< member-info kind="method" type="(fn: any) => " >}}
{{< member-description >}}{{< /member-description >}}
### setDisabledState
{{< member-info kind="method" type="(isDisabled: boolean) => void" >}}
{{< member-description >}}{{< /member-description >}}
### focus
{{< member-info kind="method" type="() => " >}}
{{< member-description >}}{{< /member-description >}}
### writeValue
{{< member-info kind="method" type="(obj: string | FacetValueFragment[] | Array<string | number> | null) => void" >}}
{{< member-description >}}{{< /member-description >}}