Tour of heroes Search component - html

Question

I'm trying to add a div in the search component in Tour of Heroes angular 2 so, when the search component is resolving the request, a three dots appear. And, once the observable is resolved, the results are shown, or, if no results are present, a message like Not found is shown.
So far, I have this:
<div id="search-component">
<h4>Hero Search</h4>
<input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
<div>
<div *ngIf="searchBox.value.length > 0 && !(heroes | async)" >...</div>
<div *ngFor="let hero of heroes | async"
(click)="gotoDetail(hero)" class="search-result" >
{{hero.name}}
</div>
</div>
</div>
If you can see, I added the following div
<div *ngIf="searchBox.value.length > 0 && !(teams | async)" >...</div>
Trying to make the three dots to appear when the search box isn't empty and when the teams is not resolved yet.
But it is not working very well since, if I try to search for something, in the meantime the request is done, I can see the three dots but, once is resolved, if I removed some letters and try again, the three dots don't appear anymore.
This is the controller, it is exactly the same as the one you can find in the your of heroes (https://angular.io/docs/ts/latest/tutorial/toh-pt6.html)
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { HeroSearchService } from './hero-search.service';
import { Hero } from './hero';
#Component({
moduleId: module.id,
selector: 'hero-search',
templateUrl: 'hero-search.component.html',
styleUrls: [ 'hero-search.component.css' ],
providers: [HeroSearchService]
})
export class HeroSearchComponent implements OnInit {
heroes: Observable<Hero[]>;
private searchTerms = new Subject<string>();
constructor(
private heroSearchService: HeroSearchService,
private router: Router) {}
// Push a search term into the observable stream.
search(term: string): void {
this.searchTerms.next(term);
}
ngOnInit(): void {
this.heroes = this.searchTerms
.debounceTime(300) // wait for 300ms 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
? this.heroSearchService.search(term)
// or the observable of empty heroes if no search term
: Observable.of<Hero[]>([]))
.catch(error => {
// TODO: real error handling
console.log(error);
return Observable.of<Hero[]>([]);
});
}
gotoDetail(hero: Hero): void {
let link = ['/detail', hero.id];
this.router.navigate(link);
}
}
Do you know how can I improve that condition?

Answer 1

in your condition:
<div *ngIf="searchBox.value.length > 0 && !(heroes | async)" >...</div>
and you empty array when search returns no result.
but heroes empty array returns true
So you can either set heroes null or undefined
or check length instead, so try
<div *ngIf="searchBox.value.length > 0 && !((heroes&& heroes.length>0) | async)" >...</div>