Questions?

Do not hesitate to contact the SearchStax Support Desk.

The SearchstaxInputWidget component for Angular provides a search input with autosuggest/autocomplete functionality.

Usage

Import the component:

import { SearchstaxInputWidget } from '@searchstax-inc/searchstudio-ux-angular';

Add it to the template:

<app-searchstax-input></app-searchstax-input>

Inputs

• afterAutosuggest: Callback function triggered after autosuggest request completes. Used to modify autosuggest response before rendering suggestions.
• beforeAutosuggest: Callback function triggered before autosuggest request. Used to modify autosuggest request parameters.
• searchInputId: ID of the search input element. Default is ‘searchstax-search-input’.
• suggestAfterMinChars: Minimum number of characters required to trigger autosuggest. Default is 3.
• templateOverride: TemplateRef to override the default UI template.

Methods

• onMouseLeave(): Resets autosuggest selection highlight.
• onMouseOver(): Highlights autosuggestion on mouseover.
• onMouseClick(): Selects highlighted autosuggestion.

Template Binding Properties

The templateOverride template provides the following context properties:

• suggestions: Array of autosuggestion objects.
• onMouseLeave: Method to reset autosuggest highlight.
• onMouseOver: Method

See Example of Input Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The SearchstaxResultsWidget for Angular component displays the search results.

Usage

Import the component:

import { SearchstaxResultsWidget } from '@searchstax-inc/searchstudio-ux-angular';

Add it to the template:

<app-searchstax-results></app-searchstax-results>

Inputs

• afterLinkClick: Callback function triggered when a result link is clicked. Used to modify the clicked result.
• noResultsTemplate: TemplateRef to override the default no results UI.
• resultsTemplate: TemplateRef to override the default results UI.

Properties

• searchResults: Array of result objects.
• metadata: Object containing search metadata like spelling suggestions etc.
• searchTerm: The search term for which results are displayed.

Methods

• resultClicked(): Handles click on a result link. Calls afterLinkClick if defined.
• isImage(): Checks if a field contains an image.

Template Binding Properties

The noResultsTemplate provides the following properties:

• metadata: Search metadata object.
• searchTerm: Search term entered by user.

The resultsTemplate provides:

• searchResults: Array of result objects.
• resultClicked: Method to handle result click.
• isImage: Method to check for image.
• context: Component instance context.

See Example of Results Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The SearchstaxFacetsWidget for Angular component displays the search facets.

Usage

Import the component:

import { SearchstaxSearchFacetsWidget } from '@searchstax-inc/searchstudio-ux-angular';

Add to template:

<app-searchstax-search-facets></app-searchstax-search-facets>

Inputs

• templateOverrideMobile: TemplateRef to override mobile UI.
• templateOverrideDesktop: TemplateRef to override desktop UI.
• facetingType: Faceting mode – ‘and’, ‘or’, ‘showUnavailable’, ‘tabs’.
• itemsPerPageDesktop: Facets to show per group on desktop.
• itemsPerPageMobile: Facets to show per group on mobile.
• specificFacets: Array of facet names to display.

Properties

• facetsTemplateDataDesktop: Desktop facets data.
• facetsTemplateDataMobile: Mobile facets data.
• selectedFacetsCheckboxes: Array of selected checkbox facets.

Methods

• Facet Selection:
  • selectFacet(): Handles facet selection.
  • isChecked(): Checks if facet is selected.
  • unselectFacet(): Unselects given facet.
  • unselectAll(): Clears all selected facets.
• Facet Group Toggle:
  • toggleFacetGroup(): Toggles facet group active/inactive.
  • isNotDeactivated(): Checks if facet group is active.
• Show More/Less:
  • showMoreLessDesktop(): Handles show more/less on desktop.
  • showMoreLessMobile(): Handles show more/less on mobile.
• Mobile Overlay:
  • openOverlay(): Opens mobile facet overlay.
  • closeOverlay(): Closes mobile facet overlay.

Template Binding Properties

templateOverrideDesktop provides:

• facetsTemplateDataDesktop: Desktop facets data object.
• context: Component instance context.
• toggleFacetGroup: Toggles facet group active/inactive.
• facetValues: Gets facet values for a group.
• isChecked: Checks if facet is selected.
• selectFacet: Handles facet selection.
• showMoreLessDesktop: Handles show more/less on desktop.

templateOverrideMobile provides:

• context: Component instance context.
• toggleFacetGroup: Toggles facet group active/inactive.
• facetValues: Gets facet values for a group.
• isChecked: Checks if facet is selected.
• selectFacet: Handles facet selection.
• openOverlay: Opens mobile overlay.
• selectedFacetsCheckboxes: Array of selected facets.
• unselectFacet: Unselects given facet.
• unselectAll: Clears all selected facets.
• facetMobileData: Gets mobile facets data object.
• facetsTemplateDataMobile: Mobile facets data object.
• closeOverlay: Closes mobile overlay.
• showMoreLessDesktop: Handles show more/less on desktop.

See Example of Facets Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The SearchstaxPaginationWidget for Angular displays pagination controls for search results.

Usage

Import the component:

import { SearchstaxPaginationWidget } from '@searchstax-inc/searchstudio-ux-angular';

Add it to the template:

<app-searchstax-search-pagination></app-searchstax-search-pagination>

Inputs

• templateOverride: TemplateRef to override the default pagination UI.

Properties

• paginationData: Object containing pagination data like page numbers, result ranges etc.
• context: Component instance reference.

Methods

• nextPage(): Advances to the next page.
• previousPage(): Goes back to previous page.
• attachObservables(): Subscribes to search data observables.

Template Binding Properties

The templateOverride provides:

• paginationData: Pagination data object.
• previousPage: Method to go to previous page.
• nextPage: Method to go to next page.
• context: Component instance context.

See Example of Pagination Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The SearchstaxRelatedSearchesWidget displays related searches.

Usage

Import the component:

import { SearchstaxRelatedSearchesWidget } from '@searchstax-inc/searchstudio-ux-angular';

Add to template:

<app-searchstax-related-searches></app-searchstax-related-searches>

Inputs

• relatedSearchesURL: URL for fetching related searches.
• relatedSearchesAPIKey: API key for related searches.
• templateOverride: TemplateRef to override default UI.

Properties

• relatedData: Object containing related searches data.
• context: Component instance reference.

Methods

• executeSearch(): Triggers new search for a related query.
• attachObservables(): Subscribes to search data observables.

Template Binding Properties

The templateOverride provides:

• relatedData: Related searches data object.
• executeSearch: Method to trigger new search.
• context: Component instance context.

See Example of Related Searches Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The **SearchstaxExternalPromotionsWidget** displays external promotions fetched from the API.

Usage

Import the component:

import { SearchstaxSearchExternalPromotionsWidget } from '@searchstax-inc/searchstudio-ux-angular';

Add to template:

<app-searchstax-external-promotions></app-searchstax-external-promotions>

Input

• templateOverride: TemplateRef to override default UI template.

Properties

• externalPromotionsData: External promotions data object.

Methods

• trackClick(): Handles click tracking for promotions.

Template Binding Properties

The templateOverride template provides:

• externalPromotionsData: External promotions data object.
• context: Component instance context.
• trackClick: Handles click tracking for promotions.

See Example of External Promotions Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The **SearchstaxSortingWidget** displays sorting options for search results.

Usage

Import the component:

import { SearchstaxSearchSortingWidget } from '@searchstax-inc/searchstudio-ux-angular';

Add to template:

<app-searchstax-search-sorting></app-searchstax-search-sorting>

Inputs

• templateOverride: TemplateRef to override default sorting UI.

Properties

• sortingData: Object containing sorting data.
• context: Component instance reference.
• selectedSorting: Current selected sorting.

Methods

• orderChange(): Handles changing the sort order.
• attachObservables(): Subscribes to search data observables.

Template Binding Properties

The templateOverride provides:

• selectedSorting: Current selected sorting.
• orderChange: Method to handle changing sort.
• context: Component instance context.

See Example of Sorting Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.