How to detect onfocus and blur event of ion-searchbar in ionic2?

angular, dom-events, ionic2, typescript

Solution

To catch focus / blur events on searchbar you should use (ionFocus) and (ionBlur) instead of Angular's (focus) and (blur). Works like a charm for me!

<ion-searchbar #searchbar placeholder="Type an address" showCancelButton
               (ionBlur)="checkBlur()"
               (ionFocus)="checkFocus()"></ion-searchbar>

Problem

I'm now using ionic2 to build an app. I want to detect when the searchbar input get focus and when it blur so that I can hide or show some components according to the current status. (For example, show some suggestions when the user clicks this searchbar.) This is my code: ``` <ion-searchbar #searchbar [(ngModel)]="searchInput"></ion-searchbar> ``` However, I found that this component seems don't have these two events.I have tried to add an event listener like this, but it didn't work: ``` <ion-searchbar #searchbar [(ngModel)]="searchInput" (focus)="searchBarOnFocus()"></ion-searchbar> ``` So can I implement this feature in some other ways? Thanks in advance! There are two documents for ion-searchbar: component document & api document

Original source