Error on Searchbar Cancel

Ionic Framework ionic-v3
1

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:
.ts

    import ...

        @Page({
            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;
                debugger;
            }
        }

html

<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?

thanks,
drachenbach

2

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