Filter button

<filter-button> is what Filters bar renders one of, per authorized aggregation: a pill button that opens the aggregation's facet in a native popover.

Minimal example

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

@Component({
  selector: "sample-component",
  imports: [FilterButtonComponent],
  template: ` <filter-button name="Sources" column="sourcestr4" /> `,
})
export class SampleComponent {}

The button's label follows the same display/name precedence as Aggregation, and shows a count badge once more than one value is selected. A date column renders its currently-applied range inline instead of a plain label.

How it works

The popover is a native [popover] element (top layer): it can never be clipped by an ancestor's overflow/z-index, and only the viewport itself bounds its size. Its inner <Aggregation> is capped to the actual available space between the trigger and the viewport edge:

Without this, flip()/shift() alone only reposition the popover — they never shrink it — so a facet with many values could overflow past the viewport in the gap between the trigger and the screen edge.

Recipes

A fixed placement, ignoring available space

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

@Component({
  selector: "sample-component",
  imports: [FilterButtonComponent],
  template: ` <filter-button name="Authors" column="authors" position="bottom-start" [lockPosition]="true" /> `,
})
export class SampleComponent {}

Options

Pitfalls

What's next