Filters bar

<filters-bar> renders one filter button per authorized aggregation, in a keyboard- navigable toolbar, and folds whatever does not fit into a "More" button. It shows what a user can filter on — contrast with Applied filters, which shows what the query is currently filtered by.

Minimal example

import { Component } from "@angular/core";
import { FiltersBarComponent } from "@sinequa/atomic-angular";

@Component({
  selector: "sample-component",
  imports: [FiltersBarComponent],
  template: ` <filters-bar /> `,
})
export class SampleComponent {}

Each button opens its aggregation in a popover — see Filter button. Once more filters are authorized than filtersCount allows, the remaining ones move into the "More" button rather than overflowing the toolbar.

How it works

The bar is an @angular/aria Toolbar: arrow keys rove between buttons, and the overflow manager recounts how many fit whenever the container resizes or the applied filters/basket change — a button hidden by overflow emits no resize notification of its own when its natural width changes, so the recount is driven by the store instead.

Recipes

Limit and reorder the visible filters

import { Component } from "@angular/core";
import { FiltersBarComponent } from "@sinequa/atomic-angular";

@Component({
  selector: "sample-component",
  imports: [FiltersBarComponent],
  template: ` <filters-bar [filtersCount]="2" [excludeFilters]="['Sources']" /> `,
})
export class SampleComponent {}

filtersCount can also be set application-wide through the FILTERS_BREAKPOINT injection token, rather than repeating it on every <filters-bar>:

import { FILTERS_BREAKPOINT } from "@sinequa/atomic-angular";

providers: [{ provide: FILTERS_BREAKPOINT, useValue: 3 }];

A vertical bar, for a sidebar layout

import { Component } from "@angular/core";
import { FiltersBarComponent } from "@sinequa/atomic-angular";

@Component({
  selector: "sample-component",
  imports: [FiltersBarComponent],
  template: ` <filters-bar direction="vertical" position="right" class="w-56" /> `,
})
export class SampleComponent {}

Options

Pitfalls

What's next