title: How to create login in ionic 2 with show/hide password
body: <p>I wanted to create a design like this using ionic 2 -> 
  <a href="https://codepen.io/Floky87/pen/bVopyZ" rel="noreferrer">https://codepen.io/Floky87/pen/bVopyZ</a></p>
  
  <p>Which is a login functionality that has a hide/show password.</p>
  
  <p>Here's my HTML code</p>
  
  <pre><code>&lt;ion-header&gt;
  
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;Login&lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  
  &lt;/ion-header&gt;
  
  
  &lt;ion-content padding&gt;
  &lt;ion-item&gt;
        &lt;ion-label floating primary&gt;Username&lt;/ion-label&gt;
        &lt;ion-input type="text"&gt;&lt;/ion-input&gt;
  &lt;/ion-item&gt; 
  &lt;ion-item&gt;
        &lt;ion-label floating primary&gt;Password&lt;/ion-label&gt;
        &lt;ion-input type="password"&gt;&lt;/ion-input&gt;
        &lt;ion-icon name="eye" item-right (click)="showHide()"&gt;&lt;/ion-icon&gt;
  &lt;/ion-item&gt; 
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>And Here's the result -> <a href="http://prntscr.com/gz12xg" rel="noreferrer">http://prntscr.com/gz12xg</a></p>
  
  <p>Here's my .ts code</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController, NavParams } from 'ionic-angular';
  
  @Component({
    selector: 'page-login',
    templateUrl: 'login.html',
  })
  export class LoginPage {
  
    constructor(public navCtrl: NavController, public navParams: NavParams) {
    }
  
    ionViewDidLoad() {
      console.log('ionViewDidLoad LoginPage');
    }
    showHide() {
      console.log('hi');
    }
  
  }
  </code></pre>
  
  <p>The Problem is, the eye icon, is not clickable. No log from the console.</p>
  
  <p>When I click the eye icon, it only allows me to input from the password field.</p>
  
  <p>Anybody can help me? I just want the eye icon to be clickable.</p>