Search vs List all in Angular 2

Handling search and the List of all items in Angular 2 in the same Component

Using the tutorial of Angular 2 for hero search was the base for this, although I wanted that the same table to show the All the items when the search was inactive without having to do a new component (one for searching and another one for listing all products).

On the template I setup the call of the enableSearch and disableSearch events

<input id=”search-box” (keyup)=”enableSearch()” [(ngModel)]=”searchValue” />
<button (click)=”disableSearch()”>clear search</button>

the enableSearch is fired on keyup meaning someone is starting to search for a name or keyword.

the disableSearch is fired on click of the button “clear search”

I used the two way binding of searchValue so I can clear the searched text when I disable the search

In the component method enableSearch I set a flag searchEnable = true and setup the Observable relation to this.products this way if the search is Enabled I wont set it up again and kill the observable with this new call.

products: Observable<Product[]>;
private searchTerms = new Subject<string>();

parents : Product[];

selectedCategory: Product;

db: Product[];

searchValue : string = ”;

private searchEnabled:boolean = false;

Initially I make the call for the full items list using getProducts

ngOnInit() :void {
this.products = this.productService.getProducts();

When the search is enabled by the keyup event this is executed

    enableSearch() {
if (!this.searchEnabled) {
this.products = this.searchTerms
.debounceTime(500)        // wait for n ms pause in events
.distinctUntilChanged()   // ignore if next search term is same as previous
.switchMap( term => term   // switch to new observable each time
// return the http search observable
// or the observable of empty products if no search term
: this.productService.getProducts()
.catch(error => {
// TODO: real error handling
return Observable.of<Product[]>([]);

this.searchEnabled = true;

// Push a search term into the observable stream.
search(term: string): void {;


if the search wasn’t enable I set up the observable and put the search term into the observable stream 😡 . The ternary operator would only fire the list if I had the search typed so to get always a result list I had to make these changes, so the table would be filled when a search was on and when there was no search.

And the code bellow disables the search and displays all the products available

disableSearch() {
this.searchValue = ”;
this.searchEnabled = false;
this.products = this.productService.getProducts();

I set the searchValue to an empty string and disable the searchEnabled value and getProducts from the Service.




Sobre Fernando André
SysAdmin, Website and Application Developer

Deixe uma Resposta

Please log in using one of these methods to post your comment:

Logótipo da

Está a comentar usando a sua conta Terminar Sessão /  Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )


Connecting to %s

%d bloggers like this: