AngularJS Toggle Password Visibility

Submitted by nurhodelta_17 on Friday, January 19, 2018 - 12:06.
This is the step by step procedure in this tutorial:

Step 1: Add the following dependency

In the header portion of your HTML, add the following:
  1. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  2. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

Step 2: Add Style

Include the following style.
  1. <style type="text/css">
  2.         .myInput{
  3.                 font-size: 1em;
  4.                 padding: 1em;
  5.         }
  6. </style>

Step 3: Add the input

Next, we create our input type.
  1. <input type="{{ inputType }}" class="myInput"> <button type="button" class="btn {{ btnType }}" ng-click="showhidePassword()"><i class="fa fa-{{ icon }}"></i> {{ btnName }}</button>   

Step 4: Creating our Angular JS Script

Last step is to create our script and name it as app.js.
  1. var app = angular.module('app', []);
  2.  
  3. app.controller('myCtrl', function($scope){
  4.         $scope.inputType = 'password';
  5.         $scope.btnName = 'Show';
  6.         $scope.btnType = 'btn-primary';
  7.         $scope.icon = 'eye';
  8.  
  9.         $scope.showhidePassword = function(){
  10.                 if ($scope.inputType == 'password'){
  11.                         $scope.inputType = 'text';
  12.                         $scope.btnName = 'Hide';
  13.                         $scope.btnType = 'btn-default';
  14.                         $scope.icon = 'eye-slash';
  15.                 }
  16.                 else{
  17.                         $scope.inputType = 'password';
  18.                         $scope.btnName = 'Show';
  19.                         $scope.btnType = 'btn-primary';
  20.                         $scope.icon = 'eye';
  21.                 }
  22.         }
  23. });

Full HTML

  1. <!DOCTYPE html>
  2. <html ng-app="app">
  4.         <title>AngularJS Toggle Password Visibility</title>
  5.         <meta charset="utf-8">
  6.         <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  7.         <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  8.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  9.         <style type="text/css">
  10.                 .myInput{
  11.                         font-size: 1em;
  12.                         padding: 1em;
  13.                 }
  14.         </style>
  15. </head>
  16. <body ng-controller="myCtrl">
  17. <div class="container">
  18.         <h1 class="page-header text-center">AngularJS Toggle Password Visibility</h1>
  19.         <div class="row">
  20.                 <div class="col-sm-4 col-sm-offset-4">
  21.                         <input type="{{ inputType }}" class="myInput"> <button type="button" class="btn {{ btnType }}" ng-click="showhidePassword()"><i class="fa fa-{{ icon }}"></i> {{ btnName }}</button>           
  22.                 </div>
  23.         </div>
  24. </div>
  25. <script src="app.js"></script>
  26. </body>
  27. </html>
That ends this tutorial. Happy Coding :)
Tags
angular js
input password
password visibility
show password

Add new comment

About text formats
  • 214 views