ChrizTalk

Angular 2 show/hide password component

March 8, 2016ChrizAngular, Ionic8 comments
If you like it, please share it:

While working on my new app theme for Ionic framework 2, based on Angular 2, I needed a show-hide component for a password input field.

It’s basically an input field with a button that will change the type of the input from password to text and back.
Something like this.

You could do this by creating your own component:

import {Component} from '@angular/core'

@Component({
    selector: 'show-hide-input',
    template: '<input type="{{type}}" /><a (click)="toggleShow()">show/hide</a>'
})
export class ShowHideInput
{
    type= "password";

    show = false;

    constructor(){
    }

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

But what if you want to add some extra functionality to the input, for example bind it to a model using ngModel?
Unfortunately this isn’t working:

<show-hide-input [ngModel]="password"></show-hide-input>

So what we need to do is creating a container for the input and use transclusion (ng-content) in the component to copy the content of the container.

import {Component} from '@angular/core'

@Component({ selector: 'show-hide-container',
            template: `<ng-content></ng-content>
                       <a (click)="toggleShow()">show/hide</a>`
})
export class ShowHideContainer
{
    show = false;

    constructor(){}

    toggleShow()
    {
        this.show = !this.show;
        if (this.show){
            //change the type to text
        }
        else {
            //change the type to password
        }
    }
}

This way we keep the functionality of the input element, but how do we get to the input to change the type?
We can solve this by using the ContentChild decorator in our component and adding a reference on the input within the container by adding #showhideinput to the input.

So our main component will look something like this:

import {Component} from '@angular/core'

@Component({ selector: 'show-hide-app',
 template: `
<h1>Show/Hide Password</h1>
<label>Password:</label>
  <show-hide-container>
    <input type="password" #showhideinput [ngModel]="password" />
  </show-hide-container>`
})
export class AppComponent {
  password = "secret";
}

And the container component will look like this

import {Component, ContentChild  } from '@angular/core'

@Component({ selector: 'show-hide-container',
 template: `<ng-content></ng-content>
            <a (click)="toggleShow()">show/hide</a>`
})
export class ShowHideContainer
{
   show = false;

   @ContentChild('showhideinput') input;

   constructor(){}

   toggleShow()
   {
      this.show = !this.show;
      console.log(this.input);
      if (this.show){
         this.input.nativeElement.type='text';
      }
      else {
         this.input.nativeElement.type='password';
      }
   }
}

Of course you can make things fancy by adding some nice icons, but I leave that up to you.

Source code is available here.

Or you can see it in action here.

And please checkout my customizable Ionic theme.


If you like it, please share it:
Previous Post Ionic/Angular server side error logging Next Post Ionic 2 and Font Awesome

8 comments. Leave new

ghprod
May 19, 2016 1:13 am

Can we use directive to achieve this?

Reply
henkie14
May 22, 2016 5:59 pm

What do you exactly mean? I am using a directive in the solution…

Reply
Sunny
June 7, 2019 9:22 am

Try this: https://www.npmjs.com/package/ngx-show-hide-password

Reply
Abhay
December 26, 2016 1:35 pm

Great! Thanks…

Reply
Farhad
August 25, 2017 6:11 am

Nice. It helped me. Thanks buddy!

Reply
Ariane Llanillo
February 13, 2018 10:52 am

Nice. It really works. Thanks.

Reply
pinki
April 5, 2018 6:53 am

nice

Reply
Anthony Nahas
March 25, 2019 8:15 pm

take a look at the `mat-pass-toggle-visibility` component of the @angular-material-extensions/password-strength library https://github.com/angular-material-extensions/password-strength

Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Ionic 3 and Firebase Facebook authentication using AngularFire2
  • Ionic 3 and Firebase authentication using AngularFire2
  • Ionic 3, Firebase and AngularFire2
  • Ionic 2 and Font Awesome using Sass
  • Using Google Fonts in Ionic 2

My Ionic 2 Theme

Please have a look at my new Ionic 2 theme.

&copy 2016 ChrizTalk