title: Set focus on an input with Ionic 2
body: <h2><strong>SOLVED :</strong></h2>
  
  <pre><code>import { Component, ViewChild} from '@angular/core';
  import { Keyboard } from 'ionic-native';
  
  
  @Component({
    templateUrl: 'build/pages/home/home.html'
  })
  export class HomePage {
    @ViewChild('input') myInput ;
  
    constructor() {}
  
    ionViewDidLoad() {
  
      setTimeout(() =&gt; {
        Keyboard.show() // for android
        this.myInput.setFocus();
      },150);
  
   }
  
  } 
  </code></pre>
  
  <p><strong>1) import "ViewChild"</strong></p>
  
  <p><code>import {Component, ViewChild} from '@angular/core';</code></p>
  
  <p><strong>2) Create a reference to your input in your html template :</strong></p>
  
  <pre><code>&lt;ion-input #focusInput&gt;&lt;/ion-input&gt;
  </code></pre>
  
  <p><strong>3) Use @ViewChild to get access to the input component you just referenced previously.</strong></p>
  
  <p><code>@ViewChild('focusInput') myInput ;</code></p>
  
  <p><strong>4) Trigger the focus</strong> </p>
  
  <p>Use the ionViewLoaded() method to trigger it each time the view/page is loaded.</p>
  
  <p><strong><em>setTimeout is needed</em></strong></p>
  
  <pre><code>  ionViewLoaded() {
  
      setTimeout(() =&gt; {
        Keyboard.show() // for android
        this.myInput.setFocus();
      },150); //a least 150ms.
  
   }
  </code></pre>
  
  <p><strong>4) Show the keyboard on Android</strong> </p>
  
  <p><code>import { Keyboard } from 'ionic-native';</code></p>
  
  <p>Call Keyboard.show() to call the keyboard on Android. </p>
  
  <p><strong>5) Show the keyboard on iOS</strong> </p>
  
  <p>add this line to your config.xml to make it work on iOS :</p>
  
  <p><code>&lt;preference name="KeyboardDisplayRequiresUserAction" value="false" /&gt;</code></p>
  
  <p><em>With the help from the great article of mhartington : <a href="http://mhartington.io/post/setting-input-focus/" rel="noreferrer">http://mhartington.io/post/setting-input-focus/</a></em></p>