Covalent: Need a way to set/clear search string

[jengstrm]

This repository's issues are reserved for feature requests and bug reports.

Feature Request

I would like a way to set or clear the search text outside the component and without having to click the X to close the search. There should be some sort of exposed method that allows you to get and set the search input string.

[asaph26]

You could achieve this today with something like this.

Extended reply based on https://github.com/Teradata/covalent/issues/182

import { Component, ViewChild } from '@angular/core';
import { TdSearchBoxComponent } from '@covalent/core';

@Component({
    selector: 'some-component',
    template: `<td-search-box #searchBox backIcon="arrow_back" class="push-right-sm" placeholder="Search" (searchDebounce)="search($event)"
            showUnderline="true" flex></td-search-box>`
})
export class SomeComponent {
    @ViewChild('searchBar') searchBar: TdSearchBoxComponent;

    search($event: string) { ... }


    /* You can use the same approach to set the search string */
    clearSearchField() {
        this.searchBar.value = '';
    }
}

[melcor76]

Thanks for the nice example.
It was also nice to be able to call this.searchBox.toggleVisibility() to close the search.

[emoralesb05]

We probably need to add more examples in our docs to let developers know all the possible ways our components can be used. (or at least the most frequently asked)

[jotatoledo]

Close, solved @emoralesb05

[emoralesb05]

Yeah, thanks! Adding faqs label