product-variant-selector-component.md 2.3 KB
title: "ProductVariantSelectorComponent" weight: 10 date: 2023-07-14T16:57:51.242Z showtoc: true
generated: true
ProductVariantSelectorComponent
# ProductVariantSelectorComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/components/product-variant-selector/product-variant-selector.component.ts" sourceLine="21" packageName="@vendure/admin-ui">}}
A component for selecting product variants via an autocomplete-style select input.
*Example*
```HTML
```
## Signature
```TypeScript
class ProductVariantSelectorComponent implements OnInit {
searchInput$ = new Subject();
searchLoading = false;
searchResults$: Observable;
@Output() @Output() productSelected = new EventEmitter();
constructor(dataService: DataService)
ngOnInit() => void;
selectResult(product?: ProductSelectorSearchQuery['search']['items'][number]) => ;
}
```
## Implements
* OnInit
## Members
### 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<ProductSelectorSearchQuery['search']['items']>" >}}
{{< member-description >}}{{< /member-description >}}
### productSelected
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### constructor
{{< member-info kind="method" type="(dataService: DataService) => ProductVariantSelectorComponent" >}}
{{< member-description >}}{{< /member-description >}}
### ngOnInit
{{< member-info kind="method" type="() => void" >}}
{{< member-description >}}{{< /member-description >}}
### selectResult
{{< member-info kind="method" type="(product?: ProductSelectorSearchQuery['search']['items'][number]) => " >}}
{{< member-description >}}{{< /member-description >}}