Angular - Facets Widget

Updated

SearchStax Site Search includes the SearchstaxFacetsWidget for Angular. You can use it to display search facets.

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