Atomic Angular — Doc interne
Filtering results

More

The overflow surface for filters beyond the filters bar's visible count — a popover on desktop, escalating to a Dialog or a mobile Sheet.

<more-button> renders the "More" trigger Filters bar shows once more filters are authorized than fit — its content, <more>, is the same stacked-facet accordion as Aside filters, just shown inside an overlay instead of a persistent sidebar.

Minimal example

The overflow button, standalone
sample.component.ts
import { Component } from "@angular/core";
import { MoreButtonComponent } from "@sinequa/atomic-angular";

@Component({
  selector: "sample-component",
  imports: [MoreButtonComponent],
  template: ` <more-button [count]="3" /> `,
})
export class SampleComponent {}

count is how many authorized filters are already shown elsewhere (typically the bar's own filtersCount) — <more-button> renders everything beyond that.

How it works

<more-button> picks its container by context, never the same one twice on a given viewport:

yes no yes no more-button isMobile()? Sheet, bottom, size lg enrichedThreshold set and overflow count exceeds it? modal Dialog anchored Popover More component

Above 6 overflow filters, <More> itself grows a facet-name search box, independently of which container it renders inside — a popover with many facets is otherwise as hard to scan as a sidebar with many facets.

Recipes

Escalate to a modal past a threshold

Popover up to 6 overflow filters, Dialog beyond
sample.component.ts
import { Component } from "@angular/core";
import { MoreButtonComponent } from "@sinequa/atomic-angular";

@Component({
  selector: "sample-component",
  imports: [MoreButtonComponent],
  template: ` <more-button [count]="3" [enrichedThreshold]="6" /> `,
})
export class SampleComponent {}

<More> alone, inside a custom container

Reach for <more> directly (skipping <more-button>'s own popover/dialog/sheet selection) when it needs to sit inside a container you already control:

The stacked facets, inside your own overlay
sample.component.ts
import { Component } from "@angular/core";
import { MoreComponent } from "@sinequa/atomic-angular";

@Component({
  selector: "sample-component",
  imports: [MoreComponent],
  template: `
    <div class="max-h-[60vh] overflow-y-auto">
      <more [count]="3" [hideWhenEmpty]="true" />
    </div>
  `,
})
export class SampleComponent {}

Options

Prop

Type

Pitfalls

What's next

Filters bar

Where this overflow button is normally mounted from.

Aside filters

The same stacked-facet accordion, in a persistent sidebar instead of an overlay.

Filter button

The single-facet popover button rendered by the filters bar — one Aggregation per button, sized to fit the viewport.

Aside filters

A collapsible accordion of facets for a sidebar or drawer, with keyboard navigation jumping directly between facet headers.

On this page

Minimal exampleHow it worksRecipesEscalate to a modal past a threshold<More> alone, inside a custom containerOptionsPitfallsWhat's next