Cross-cutting pipes

None of these pipes know anything about a query or a result — they format a value for display, and are useful anywhere in an application, not only in a search screen.

highlightWord — mark a search term inside text

import { Component, input } from "@angular/core";
import { HighlightWordPipe } from "@sinequa/atomic-angular";

@Component({
  selector: "sample-component",
  imports: [HighlightWordPipe],
  template: `<span *ngFor="let chunk of text() | highlightWord: query()" [class.font-bold]="chunk.match">{{ chunk.text }}</span>`,
})
export class SampleComponent {
  readonly text = input.required<string>();
  readonly query = input.required<string>();
}

Returns an array of HighlightWords.Chunk (from the highlight-words package), not a string — render each chunk yourself, styling the ones with match: true. Matching is accent-insensitive on both sides (café highlights on a search for cafe), since both the text and the query are Unicode-normalized and stripped of combining diacritics before comparing.

syslang — a translated system string

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

// template: {{ 'Hello[fr]Bonjour' | syslang }}
// → "Bonjour" if the current interface language is "fr", "Hello" otherwise
// {{ 'Hello[fr]Bonjour' | syslang: 'fr' }} forces "fr" regardless of the current language

A compatibility bridge for a legacy Text[lang]Translation syntax that predates Angular i18n — most applications never author strings in this format themselves, but the server still returns some. Impure by design: it re-evaluates on every TranslocoService.langChanges$ emission, not only on a new input value, so a label already on screen updates when the user switches language without any component code reacting to it.

translocoDate — a locale-aware DatePipe

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

// template: {{ document.modified | translocoDate: 'mediumDate' }}

Extends Angular's own DatePipe, passing TranslocoService's current language as the locale argument on every transform — the format string ('mediumDate', 'short', …) is Angular's own, only the locale follows the interface language automatically instead of the app's static LOCALE_ID.

fileSize — bytes to a unit and a magnitude

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

// template: {{ (document.size | fileSize).value | number: '1.0-1' }} {{ (document.size | fileSize).key | transloco }}

Returns { key: string; value: number } — a translation key (memorySize.kb, .mb, .gb, .tb, .pb, or memorySize.bytes below 1 KB) and the numeric magnitude in that unit, not a formatted string. Your application's translation catalog must define those keys; pass value through a number pipe and key through your own translation pipe separately.

operator — a legacy filter as a comparison string

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

// template: {{ storedFilter | operator }}
// → "≥ 2026-01-01 ≤ 2026-03-31" for a between/and-of-gte-lte range, "= pdf" for a plain comparison

Takes a LegacyFilter (from @sinequa/atomic) and renders it as a human-readable comparison, using the interface language's date formatting for any date-valued operand. between and an and of gte/lte collapse into one range string; every other operator renders as its symbol (=, ≠, <, ≤, >, ≥) followed by the value.

Options

Pitfalls

What's next