@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UISearchView<T>

    A unified browse-and-filter layout that composes UIFilter, UITableView (or a custom results template), and UIPagination into a single search screen.

    <ui-search-view [datasource]="ds" title="Users">
      <ui-text-column key="name" headerText="Name" />
      <ui-text-column key="email" headerText="Email" />
    </ui-search-view>

    <ui-search-view [datasource]="ds" layout="custom" [filterFields]="fields">
      <ng-template #results let-items>
        @for (item of items; track item.id) {
          <app-card [data]="item" />
        }
      </ng-template>
    </ui-search-view>

    <ui-search-view [datasource]="ds">
      <ng-template #filter>
        <my-custom-filter (change)="applyFilter($event)" />
      </ng-template>
      <ui-text-column key="name" headerText="Name" />
    </ui-search-view>

    Type Parameters

    • T = unknown
    Index

    Constructors

    constructor

    Properties

    ariaLabel columns datasource emptyTemplate expressionChange filterDescriptor filterExpanded filterFields filterModeLocked filterTemplate layout pageChange pageIndex pageSize pageSizeOptions placeholder resultsTemplate savedSearchChange showFilter showPagination storageKey title

    Methods

    deleteSavedSearch loadSavedSearch saveNewSearch toggleFilter

    Constructors

    • Type Parameters

      • T = unknown

      Returns UISearchView<T>

    Properties

    ariaLabel: InputSignal<string> = ...

    Accessible label for the component.

    columns: Signal<readonly UITableViewColumn[]> = ...

    Projected table-view columns (used in table layout mode).

    datasource: InputSignal<IDatasource<T> | undefined> = ...

    The datasource powering the search results.

    Accepts any IDatasource. When the datasource is a FilterableArrayDatasource the component automatically applies filter expressions from the embedded filter.

    emptyTemplate: Signal<TemplateRef<unknown> | undefined> = ...

    Optional empty-state template.

    expressionChange: OutputEmitterRef<FilterExpression<T>> = ...

    Emits the FilterExpression every time the filter rules change.

    filterDescriptor: ModelSignal<FilterExpression<T>> = ...

    The filter descriptor state (two-way bindable).

    filterExpanded: InputSignal<boolean> = ...

    Whether the filter section starts expanded.

    filterFields: InputSignal<FilterFieldDefinition<T>[] | undefined> = ...

    Explicit filter field definitions.

    When provided these override the auto-inferred fields derived from projected columns and sample data.

    filterModeLocked: InputSignal<boolean> = ...

    Whether the filter toggle button is hidden.

    filterTemplate: Signal<TemplateRef<unknown> | undefined> = ...

    Optional custom filter template.

    layout: InputSignal<SearchViewLayout> = ...

    Results layout mode.

    • 'table' (default) — uses <ui-table-view> with projected columns.
    • 'custom' — renders the projected #results template.
    pageChange: OutputEmitterRef<PageChangeEvent> = ...

    Emits when the page changes.

    pageIndex: ModelSignal<number> = ...

    Current page index (two-way bindable, zero-based).

    pageSize: InputSignal<number> = ...

    Items per page.

    pageSizeOptions: InputSignal<readonly number[]> = ...

    Available page-size options in the pagination selector.

    placeholder: InputSignal<string> = ...

    Placeholder text shown when there are no results.

    resultsTemplate: Signal<TemplateRef<SearchViewResultsContext<T>> | undefined> = ...

    Optional custom results template (used in custom layout mode).

    savedSearchChange: OutputEmitterRef<SavedSearch<unknown> | null> = ...

    Emits when a saved search is loaded, saved, or deleted.

    showFilter: InputSignal<boolean | undefined> = ...

    Whether the filter section is visible.

    • true — always show the filter.
    • false — never show the filter.
    • undefined (default) — auto-detect: show when the datasource is a FilterableArrayDatasource.
    showPagination: InputSignal<boolean> = ...

    Whether to show the pagination footer.

    storageKey: InputSignal<string | undefined> = ...

    Storage key that enables the saved-searches feature.

    When set, a toolbar strip is shown allowing users to save, load, and delete named filter states. The key is used to namespace the persisted data in the underlying StorageService.

    Leave undefined (default) to disable saved searches.

    title: InputSignal<string> = ...

    Title displayed in the header area.

    Methods

    • Delete a saved search by its ID.

      Parameters

      • searchId: string

      Returns void

    • Load a saved search by its ID, applying its filter descriptor to the search view.

      Parameters

      • searchId: string

      Returns void

    • Save the current filter state as a new named search.

      Parameters

      • name: string

      Returns void

    • Toggle the filter panel open/closed.

      Returns void

    Settings

    Member Visibility

    On This Page

    Table mode (default)Custom results templateWith custom filter template
    Constructors
    Properties
    Methods