SearchstaxFacetsWidget Angular

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.