Show hide password in Ionic

Junaid Ahmed
Sep 5, 2018 · 1 min read

Directive:

import {Directive, ElementRef, HostListener, Input} from '@angular/core';

/**
* Generated class for the PasswordToggleDirective directive.
*
* See https://angular.io/api/core/Directive for more info on Angular
* Directives.
*/
@Directive({
selector: '[passwordToggle]' // Attribute selector
})
export class PasswordToggleDirective {
@Input('appTargetInput') targetInput: any;

constructor(el: ElementRef) {
}

@HostListener('click') onMouseEnter() {
let inType = (this.targetInput._native.nativeElement.type == 'text')? 'password': 'text';
this.targetInput._native.nativeElement.type = inType;
}

}

Usage:

<ion-item no-margin no-padding class="clear-item-inner">
<ion-label> <ion-icon name="md-lock"></ion-icon></ion-label>
<ion-input #toggleInput formControlName="password" class="half-inp half-border-inp" type="password" placeholder="Password"></ion-input>
<button class="showhidePass" color="light" ion-button type="button" clear item-end passwordToggle [appTargetInput]="toggleInput">
<ion-icon name="eye"></ion-icon>
</button>
</ion-item>

Pass template reference variable to ‘appTargetInput’ of passwordToggle directive. I have passed it toggleInput which is the reference variable for ion-input above it.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade