Atomic Angular — Doc interne

Sort Selector

A dropdown listing the sort choices a tab or query configuration actually offers, resolved from the current result rather than passed in by hand.

<sort-selector> reads which sort choices apply from the result it is given — a tab search and a regular query can expose different lists, and the component resolves the right one instead of the caller having to know which applies.

Minimal example

Sorting the current result
results-toolbar.component.ts
import { Component, signal } from "@angular/core";
import { SortSelectorComponent } from "@sinequa/atomic-angular";
import type { Result } from "@sinequa/atomic";
import type { SortingChoice } from "@sinequa/atomic-angular";

@Component({
  selector: "results-toolbar",
  imports: [SortSelectorComponent],
  template: `
    @if (result(); as r) {
      <sort-selector [result]="r" (onSort)="applySort($event)" />
    }
  `,
})
export class ResultsToolbarComponent {
  protected readonly result = signal<Result | undefined>(undefined);

  protected applySort(sort: SortingChoice) {
    console.log(sort.name, sort.$isDesc);
  }
}

How it works

  1. Tab search — extracts sorting choices from the specific tab's own configuration (tab.sortingChoices), falling back to the query's if the tab defines none.
  2. Regular query — uses the query configuration's sortingChoices directly.
  3. Either way, a choice whose orderByClause includes globalrelevance is filtered out when the result has no relevance score (!result().hasRelevance) — a relevance sort makes no sense without one.
yes no no yes result() isTabSearch(query)? tab.sortingChoices query.sortingChoices hasRelevance? Drop globalrelevance choices Keep all sortOptions()

Options

Prop

Type

onSort emits a SortingChoice (the configured choice plus a resolved $isDesc boolean) only when the user picks a different option than the one currently active — reselecting the active sort emits nothing.

Pitfalls

What's next

On this page