SearchInput

  npm i @ge-corp/search-input

Usage: SearchInput

Importing Module

Import SearchInputModule into your Angular module:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { SearchInputModule } from "search-input";

@NgModule({
  imports: [BrowserModule, SearchInputModule],
  declarations: [YourComponent],
  bootstrap: [YourComponent],
})
export class YourModule {}

Sucribe on service

Use the SearchInputService for suscribe changes:

export class AppComponent implements OnInit {
  constructor(protected readonly searchService: SearchInputService) {}

  ngOnInit(): void {
    this.searchService.currentSearchQuery.subscribe((qry) => {
      console.log({ qry });
    });
  }

  onSearch($event: string) {
    this.searchService.changeSearchQuery($event);
  }
}

Using the Component

Use the search-input component in your template:

<search-input (search)="onSearch($event)"></search-input>