Focus the ion-searchbar on ionViewDidEnter

Ionic Framework ionic-v3
2

Use this code to set focus on search bar.

import {Component, Input, ViewChild} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  @ViewChild('searchBar') myInput ;

  constructor(private navCtrl: NavController) { }

  ionViewDidLoad() {

    setTimeout(() => {
      this.myInput.setFocus();
    },150);

 }

}

and your search bar

<ion-searchbar
  [(ngModel)]="searchTerm"
  #searchBar
  [showCancelButton]="shouldShowCancel"
</ion-searchbar>

set #searchBar in ion-searchbar.

2 Likes