@acknow-srl/search

Search

Creates an input field for filtering data. You can use the real-time search (while typing) or submit search (press the Enter key or click on the search button).

AckSearch (Component)

Selector

ack-search

Input

• typing (boolean): true if the component has to emit the search event while typing (real-time search). Set to false for submit search (search event is emitted when you press Enter key or click on the search button). The CSS class ack-search-typing is set for the component if this property is true. Otherwise, the CSS class ack-search-submit is set. Default: true.
• placeholder (string): HTML placeholder for the field. Default: ''.
• disabled (boolean): true to make the field disabled. Default: false.
• size (number): HTML size for the field. The component CSS ignores this value and set the field width 100% of its parent element. You can overwrite the component CSS by you own one and adjust the size value manually. Default: 20.
• value (string): current value for the search field. Default: ''.
• icon (string): icon name for the search button. Default: icon-search-a.
• searchButton (string): text (set as title attribute) for search button. Default: Search.
• cancelButton (string): text (set as title attribute) for reset button. Default: Cancel.

Events

• search (string): in real-time search, it is emitted on every key press. If you search by submit, it is emitted when you press the search button or the Enter key. During component initialization, it is always emitted. It holds the current field value.

Example

/**
 * 1. Import the module in your main module (usually app.module.ts).
 */

import { AckSearchModule } from '@acknow-srl/search';

/**
 * 2. Add the module to your app imports.
 */

@NgModule({
  declarations: [
    AppComponent
    ...
  ],
  imports: [
    ...
    AckSearchModule,
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

/**
 * 3. Use the component in your HTML.
 */

<ack-search placeholder="Search everything..." (search)="myHandlerFunc($event)"></ack-search>