I wanted to create a design like this using ionic 2 -> https://codepen.io/Floky87/pen/bVopyZ
Which is a login functionality that has a hide/show password.
Here's my HTML code
<ion-header>
<ion-navbar>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label floating primary>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating primary>Password</ion-label>
<ion-input type="password"></ion-input>
<ion-icon name="eye" item-right (click)="showHide()"></ion-icon>
</ion-item>
</ion-content>
And Here's the result -> http://prntscr.com/gz12xg
Here's my .ts 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');
}
}
The Problem is, the eye icon, is not clickable. No log from the console.
When I click the eye icon, it only allows me to input from the password field.
Anybody can help me? I just want the eye icon to be clickable.