SearchstaxFacetsWidget Angular

The SearchStax Site Search solution offers an Angular facets widget to assist with your custom search page.

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.