CODEWITHSUNDEEP
httptypescriptangularobservable
Herman Fransen
Herman Fransen

Reputation: 2210

Angular2 how to empty observable stream

I am using Angular 2.0.0-beta.0 and TypeScript 1.7.5

When you type something in the search box and something is found and shown on the screen, then you delete the search input box and you want to show an empty list. It work using this piece of code: this.searchTermStream.next("makesureyoudontfindanything");

Does anyone has a better cleaner solution without doing a http request?

@Component({
    selector: 'contact-search',
    template: `
        <div class="container">
            <div class="form-group">
                <label for="inputUser">Search</label>
                <input #inputUser (keyup)="search(inputUser.value)">
            </div>
            <ul>
                <li *ngFor="#contact of contactList | async">{{contact.name}}</li>
            </ul>
        </div>
    `
})

export class ContactSearch {

    private searchTermStream = new Subject<string>();

    private contactList: Observable<Contact[]> = this.searchTermStream
        .debounceTime(300)
        .distinctUntilChanged()
        .switchMap((value: string) => this.contactService.searchContacts(value))

    constructor(private contactService: ContactService) {}

    search(value: string) {
        if (value) {
            this.searchTermStream.next(value);
        }
        else {
            this.searchTermStream.next("makesureyoudontfindanything");
        }
    }
}

Upvotes: 2

Views: 2982

Answers (1)

Sasxa
Sasxa

Reputation: 41254

You can check if value is empty before calling service:

private contactList: Observable<Contact[]> = this.searchTermStream
    .debounceTime(300)
    .distinctUntilChanged()
    .switchMap((value: string) => 
       0 < value.length ? this.contactService.searchContacts(value) : Observable.of([]))

search(value: string) {
    this.searchTermStream.next(value);
}

Upvotes: 6

Related Questions