Change ion-input type. Show/Hide password directive/component

agustinhaller · September 24, 2016, 6:06pm

Hi, I’m trying to implement a show/hide password similar to this one.

The problem I’m facing is that the TextInput directive from angular 2 has it’s type set method private so I can’t change the input type dynamically.

<show-hide-container>
    <ion-input type="password" placeholder="Password"></ion-input>
</show-hide-container>

export class ShowHideContainer
{
  show = false;

  @ContentChild(TextInput) ion_input: TextInput;

  constructor(){}

  toggleShow()
  {
    this.show = !this.show;
    if (this.show){
      // type is private!!!
      this.ion_input.type("text");
    }
    else {
      this.ion_input.type("password");
    }
  }
}

any help would be much appreciated!

GMWEBDESIGN · September 25, 2016, 11:29am

Hi!
Change your directive [show-hide-input] like this:

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

@Directive({
    selector: '[show-hide-input]'
})
export class ShowHideInput {

    @HostBinding() type: string;

    constructor(private el: ElementRef) {
        this.type = 'password';
    }

    changeType(type: string) {  // in your case function name is type
        this.type = type;
        this.el.nativeElement.children[0].type = this.type; // change type for input inside the ion-input
    }

}

And in your template:

<show-hide-container>
    <ion-input type="password" placeholder="Password" show-hide-input></ion-input> // add the directive show-hide-input
</show-hide-container>

It works for me.

agustinhaller · September 26, 2016, 2:05pm

Thank you so much!

At first I thought I could avoid using another directive (show-hide-input) and use the <ion-input> instead. But the methods I needed to access were private within the <ion-input> component, so it seems there’s no choice but to use the show-hide-input directive for this.

Another issue i found is that if you are using <ion-item> component along with <ion-input> you should put both of them inside the <show-hide-container>

THIS DOESN’T WORK

<ion-item>
  <show-hide-container>
    <ion-input type="password" placeholder="Password" formControlName="password" show-hide-input></ion-input>
  </show-hide-container>
</ion-item>

THIS WORKS

<show-hide-container>
  <ion-item>
    <ion-input type="password" placeholder="Password" formControlName="password" show-hide-input></ion-input>
  </ion-item>
</show-hide-container>

Having said that, it would be awesome if the guys from the ionic team could write a post or guide about the proper way to extend and create custom directives for the ionic framework. I believe there are tons of developers like me that want to crete awesome stuff with ionic and at the end these custom directives and UI/UX widgets will be super useful for the community.

The community is what makes ionic great.

babbler · July 15, 2017, 10:34am

There is no need to do all that is written above, just do this

in .html

 <ion-item>
    <ion-label fixed>Password</ion-label>
    <ion-input #input type="password" [(ngModel)]="loginUtente.password"></ion-input>
  </ion-item>

<ion-item>
    <ion-label for="checkbox" *ngIf="!passwordCheckbox">show password</ion-label>
    <ion-label for="checkbox" *ngIf="passwordCheckbox">hide password</ion-label>
    <ion-checkbox  class="marginTop" id="checkbox" style="border-style: none;" [(ngModel)]="passwordCheckbox" (click)="showPassword(input)"></ion-checkbox>
  </ion-item>

in .ts

showPassword(input: any): any {
   input.type = input.type === 'password' ?  'text' : 'password';
  }

I hope to have helped

rapropos · July 17, 2017, 9:41pm

I would much prefer binding [type] instead of directly fooling with DOM attributes in showPassword() (which should rather be named toggleShowPassword() or something to indicate that it doesn’t just show the password).

thorgalle · August 9, 2017, 5:55pm

Using the approach of the OP’s accepted solution in the latest Ionic 2 version I get the following error:

Unhandled Promise rejection: Template parse errors:
Can’t bind to ‘type’ since it isn’t a known property of ‘ion-input’.
…

I created two separate .ts files for both the container and input attribute directive & imported them into the declarations of app.module.ts.

Does anyone know to resolve this? Thanks!

marcocianci · November 11, 2017, 5:37pm

Hi thorgalle, this is another simple solution. I hope helped.

login.html

<ion-item>
        <ion-input [type]="getType()"></ion-input>
        <ion-icon name="eye" item-right (click)="toggleTextPassword()"></ion-icon>
 </ion-item>

login.ts

export class LoginPage {
  isActiveToggleTextPassword: Boolean = true;
  public toggleTextPassword(): void{
      this.isActiveToggleTextPassword = (this.isActiveToggleTextPassword==true)?false:true;
  }
  public getType() {
      return this.isActiveToggleTextPassword ? 'password' : 'text';
  }
}

luukschoen · November 20, 2017, 3:37pm

I don’t know why this would be better then this:

HTML

<ion-input [type]="password_type" placeholder="Password" name="password" [(ngModel)]="password" required></ion-input>
<ion-icon name="eye" item-right (click)="togglePasswordMode()"></ion-icon>

TS

password_type: string = 'password';

togglePasswordMode() {   
   this.password_type = this.password_type === 'text' ? 'password' : 'text';
}

dhawken · January 6, 2018, 5:57pm

I am also getting this issue. I thought it was related to lazy loading but maybe it is the ionic version?

jaydz · April 1, 2018, 8:02pm

This was a easy, 100% effective solution.
minor change on my end

togglePasswordMode() {   
   this.password_type === 'text' ? 'password' : 'text';
}

Not sure why you had the extra this.password_type =
Typo or just a personal preference for doing things?

luukschoen · April 1, 2018, 8:19pm

Typo thanks

jaydz · April 1, 2018, 8:21pm

No problem. Thanks for the pragmatic solution

togotech · July 27, 2018, 3:13am

Hey! I am getting errors with this. Error: Template parse errors: Can't bind to 'type' since it isn't a known property of 'ion-input'.

I recently updated to Ionic4. Is that the reason? Any update

togotech · July 27, 2018, 3:17am

Sorry I figured it out… Change the @HostBinding to @Input

owlinvest · July 2, 2019, 12:10pm

Simple and neat solution. Thank you

alaswer · January 10, 2020, 9:23pm

simple, not complicated and effective solution… thank you!

pa7ry · January 31, 2020, 12:15pm

HTML

<ion-label position="floating">Password</ion-label>
<ion-input [type]="hide ? 'password' : 'text'" required></ion-input>
<ion-icon slot="end" [name]="hide ? 'eye' : 'eye-off'" (click)="hide = !hide"></ion-icon>

TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.scss'],
})
export class LoginFormComponent implements OnInit {

  hide = true;

  constructor() { }

  ngOnInit() {}

}

I think that the easiest way to change the value of the attributes is with an if and a boolean, by clicking on the eye icon, for example

martinsetup · March 10, 2020, 1:03pm

Thanks! This was so clean and easy to implement

Dinesh_Gurjar · April 30, 2020, 9:57am

simple, short and clean solution

alexlarraga1 · June 23, 2020, 8:51pm

simple, short and clean solution

Topic		Replies	Views
Chance type input by check toggle ionic-v1	4	875	February 5, 2016
Adding a toggle button for viewing password in Ionic ionic-v1	2	2262	June 9, 2017
Show/hide password field in ionic 4 Ionic Framework	1	1777	May 18, 2019
How to add a 'show password' toggle button on the right of a password input? ionic-v1	3	2828	April 17, 2015
Password protected checkbox ionic-v1	2	974	October 2, 2015

Change ion-input type. Show/Hide password directive/component

Related topics