Lookup Search Component

LookupSearchComponent is a generic standalone search control exported by @abp/ng.components/lookup. A search function returns observable lookup items, and the component manages debouncing, loading, selection and clearing.

This component is part of the open-source @abp/ng.components package. It is different from the commercial lookup component family, which provides form-oriented typeahead, select and table controls.

The package is included in the Angular application templates. Install it if the application does not already reference it:

npm install @abp/ng.components

import { Component, inject, signal } from '@angular/core';
import {
  LookupItem,
  LookupSearchComponent,
  LookupSearchFn,
} from '@abp/ng.components/lookup';
import { map } from 'rxjs';
import { BookService } from '../services/book.service';

interface BookLookupItem extends LookupItem {
  authorName: string;
}

@Component({
  selector: 'app-book-lookup',
  templateUrl: './book-lookup.component.html',
  imports: [LookupSearchComponent],
})
export class BookLookupComponent {
  private readonly bookService = inject(BookService);

  readonly selectedBookId = signal('');
  readonly selectedBookName = signal('');

  readonly searchBooks: LookupSearchFn<BookLookupItem> = filter =>
    this.bookService.search(filter).pipe(
      map(books =>
        books.map(book => ({
          key: book.id,
          displayName: book.name,
          authorName: book.authorName,
        })),
      ),
    );

  onBookSelected(book: BookLookupItem) {
    console.log(book.key);
  }
}

<abp-lookup-search
  label="Books::Book"
  placeholder="Books::SearchBooks"
  [searchFn]="searchBooks"
  [minSearchLength]="2"
  [selectedValue]="selectedBookId()"
  (selectedValueChange)="selectedBookId.set($event)"
  [displayValue]="selectedBookName()"
  (displayValueChange)="selectedBookName.set($event)"
  (itemSelected)="onBookSelected($event)"
>
  <ng-template #itemTemplate let-book>
    <strong>{{ book.displayName }}</strong>
    <small>{{ book.authorName }}</small>
  </ng-template>
</abp-lookup-search>

Each lookup item uses key as its selected value and displayName as its displayed value by default. Set valueKey or displayKey to use another item property.

Searches use a 300 millisecond debounce by default. Configure debounceTime and minSearchLength when the remote endpoint needs different behavior. label and placeholder values are passed through ABP localization.

selectedValue and displayValue are model inputs and support two-way binding. The component also emits searchChanged for input changes and itemSelected after selection.

Add an #itemTemplate template to customize each result, as in the previous example. Add a #noResultsTemplate template to replace the default no-results content:

<ng-template #noResultsTemplate>
  <div class="list-group-item text-muted">No matching books</div>
</ng-template>