Search Bar

A self-contained search field — think an application's global search — with a leading magnifier icon and built-in clear (×) and send controls, distinct from SearchInput which blends into a form alongside other fields.

Minimal example

import { Component, signal } from "@angular/core";
import { SearchBarComponent } from "@sinequa/galactik";

@Component({
  selector: "sample-component",
  imports: [SearchBarComponent],
  template: `<SearchBar [(value)]="query" placeholder="Search…" (search)="onSearch($event)" />`,
})
export class SampleComponent {
  query = signal("");

  onSearch(query: string) {
    console.log("Submitted:", query);
  }
}

How it works

The clear (×) button appears automatically once value is non-empty and calls value.set("") internally; the send button emits the current value() on click or Enter. SearchBar never navigates or calls a backend itself — search only reports the submitted text, leaving persistence/navigation entirely to the host.

Content projected into the pill lands in one of two places: the default slot, between the clear and send buttons (query-scoped actions like a favourite toggle), or slot="trailing", after the send button (an end-of-pill call to action).

Recipes

Projecting app actions on both sides of the send button

<SearchBar [(value)]="query" (search)="onSearch($event)">
  <!-- query-scoped action: sits right before the send button -->
  <button variant="tertiary" scheme="neutral" [iconOnly]="true" size="sm" type="button" (click)="toggleFavorite()">
    ★
  </button>

  <!-- end-of-pill call to action: stays after the send button -->
  <button variant="accent" size="sm" slot="trailing" type="button" (click)="askAI()">Ask AI</button>
</SearchBar>

Conditional trailing content needs the slot="trailing" marker on an <ng-container> wrapping the block — Angular only hoists a block's marker onto the block itself when it has a single root node, and a sibling element or a @let breaks that (see Pitfalls).

With suggestions

Without suggestions, SearchBar is a native search field. To show suggestions under it, add the static suggestions attribute and import SearchBarSuggestionsComponent instead: the inner <input> then carries ngCombobox and is announced as a combobox, which it is once a popup is attached. The popup is an ng-template bound to the combobox exposed by combobox(), exactly as for SearchInput; the send button still submits the free-text query. The attribute is a choice made once, when the bar is created.

Options

Pitfalls

What's next