Aside filters

<aside-filters> stacks several Aggregation facets as a native <details>/<summary> accordion — the sidebar counterpart of Filters bar, for a layout where facets sit in a persistent column or drawer rather than a row of buttons.

Minimal example

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

@Component({
  selector: "sample-component",
  imports: [AsideFiltersComponent],
  template: ` <aside-filters class="w-64" /> `,
})
export class SampleComponent {}

By default this renders every "left"/"both" aggregation from the app's JSON configuration (excluding admin-hidden ones), each collapsed, one open at a time (exclusive, the native <details name> behaviour).

How it works

Passing an explicit aggregations list bypasses the JSON position/hidden configuration entirely — the listed aggregations render as-is, in the given order, provided they exist in the store. Resolution tries each entry as a name first (the canonical identifier), then falls back to a column match.

Each facet is a native <details>/<summary>. The <summary> row is not a keyboard stop (tabindex="-1"): Tab goes straight to the header's own buttons — select-all, clear, apply, and the chevron that collapses the facet — and on to the facet's content. The chevron button is the keyboard way to collapse a facet, and it exposes aria-expanded; clicking the row with a pointer still toggles it.

Recipes

An explicit, developer-chosen facet list

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

@Component({
  selector: "sample-component",
  imports: [AsideFiltersComponent],
  template: ` <aside-filters [aggregations]="['Authors', 'Sources', 'Geo']" class="w-64" /> `,
})
export class SampleComponent {}

Independent sections, expanded by default

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

@Component({
  selector: "sample-component",
  imports: [AsideFiltersComponent],
  template: ` <aside-filters [exclusive]="false" [collapsed]="false" class="w-64" /> `,
})
export class SampleComponent {}

Options

Pitfalls

What's next