Error on Searchbar Cancel

Hi guys,
I’m using Ionic 2.0.0-beta.19. I want to make use of the Searchbar component and react to it’s cancel() function. I’ve read the docs and implemented it like this:

    import ...

            templateUrl: 'build/pages/feed/feed.html',
            directives: [ItemComponent]
        export class FeedPage {
            constructor(private nav: NavController, private itemService: ItemService) {
                this.searchbarVisible = false;
                this.searchQuery = "";

            private searchbarVisible: boolean;
            searchQuery: string;
            private items: Item[];

            openSearch() {
                this.searchbarVisible = !this.searchbarVisible;

            search(searchbar) {

            searchbarCancelled(searchbar) {
                this.searchbarVisible = !this.searchbarVisible;


<ion-searchbar *ngIf="searchbarVisible" [(ngModel)]="searchQuery" (input)="search($event)" (cancel)="searchbarCancelled($event)"></ion-searchbar>

Now when I cancel my Searchbar it throws several errors:

Error: Attempt to use a dehydrated detector: Page_3 -> blu

Same also for clear, ngModelChange, clear and input.

Any idea what is wrong?


I fixed it.
My mistake was using *ngIf. In its nature as a structural directive, it removes the ion-searchbar-element from the DOM. I suppose this was the error. Fixed is by binding to the hidden-property as it’s stated in the Angular 2 docs.

Hope this helps someone.

1 Like