Angular - Facets Widget

Updated

Use the SearchStax Site Search Angular facets widget to display and configure facet filters on a custom search page.

Facet Selection and Order

Configure and order facet lists on the Site Search Faceting Tab.

Usage 

<app-searchstax-search-facets
            [facetingType]="'showUnavailable'"
            [itemsPerPageDesktop]="2"
            [itemsPerPageMobile]="99"
          ></app-searchstax-search-facets>

Note: UI Kits implementations support the beforeFacetsRender callback for facet value ordering. Hook binding can vary by package version, so use the package documentation for exact implementation details.

Props

  • facetingType: "and" | "or" | "showUnavailable" | "tabs" – the type that determines how facets behave
  • specificFacets?: string[]; – optional array of facet names. Only those facets render if you provide this
  • itemsPerPageDesktop: number; – default expanded facets for desktop
  • itemsPerPageMobile: number; – default expanded facets for mobile
  • beforeFacetsRender – callback that runs before facet values render. Use it to apply chronological ordering for time-based values (for example, months or days of the week).
  • templateOverrideMobile – template override for mobile view
  • templateOverrideDesktop – template override for desktop view

Example

For a full example, see searchstax-ux-angular.

Articles in this section