Search Input

Name: ng-oat
Author: SashiKumar Yadav

Search input with icon, clear button, keyboard shortcut badge, and built-in debounce.

Input	Type	Default	Description
`placeholder`	`string`	`'Search...'`	Placeholder text
`disabled`	`boolean`	`false`	Disabled state
`shortcut`	`string`	`''`	Keyboard shortcut badge text
`debounceMs`	`number`	`300`	Debounce delay in ms
`value`	`string`	`''`	Two-way bound value

Output	Type	Description
`search`	`string`	Debounced search event

Import & Usage

typescript

import { Component, signal } from '@angular/core';
import { NgOatSearchInput } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatSearchInput],
  template: `
    <ng-oat-search-input
      placeholder="Search docs..."
      shortcut="⌘K"
      [debounceMs]="300"
      [(value)]="query"
      (search)="onSearch($event)" />
  `,
})
export class ExampleComponent {
  query = signal('');
  onSearch(term: string) {
    console.log('Search:', term);
  }
}

Basic

Query: "" · Last search: ""

html

<ng-oat-search-input [(value)]="query" (search)="onSearch($event)" />

With Keyboard Shortcut

⌘K

html

<ng-oat-search-input placeholder="Search docs..." shortcut="⌘K" />

Custom Debounce

Last debounced: ""

html

<ng-oat-search-input
  placeholder="Slow debounce (1s)..."
  [debounceMs]="1000"
  (search)="onSearch($event)"
/>

Disabled

html

<ng-oat-search-input [disabled]="true" placeholder="Search disabled" />