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:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

Step 2: Add Style

Include the following style.

<style type="text/css">
	.myInput{
		font-size: 1em;
  		padding: 1em;
	}
</style>

Step 3: Add the input

Next, we create our input type.

<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.

var app = angular.module('app', []);
 
app.controller('myCtrl', function($scope){
	$scope.inputType = 'password';
	$scope.btnName = 'Show';
	$scope.btnType = 'btn-primary';
	$scope.icon = 'eye';
 
	$scope.showhidePassword = function(){
		if ($scope.inputType == 'password'){
			$scope.inputType = 'text';
			$scope.btnName = 'Hide';
			$scope.btnType = 'btn-default';
			$scope.icon = 'eye-slash';
		}
		else{
			$scope.inputType = 'password';
			$scope.btnName = 'Show';
			$scope.btnType = 'btn-primary';
			$scope.icon = 'eye';
		}
	}
});

Full HTML

<!DOCTYPE html>
<html ng-app="app">
<head>
	<title>AngularJS Toggle Password Visibility</title>
	<meta charset="utf-8">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
	<style type="text/css">
		.myInput{
			font-size: 1em;
  			padding: 1em;
		}
	</style>
</head>
<body ng-controller="myCtrl">
<div class="container">
	<h1 class="page-header text-center">AngularJS Toggle Password Visibility</h1>
	<div class="row">
		<div class="col-sm-4 col-sm-offset-4">
			<input type="{{ inputType }}" class="myInput"> <button type="button" class="btn {{ btnType }}" ng-click="showhidePassword()"><i class="fa fa-{{ icon }}"></i> {{ btnName }}</button>		
		</div>
	</div>
</div>
<script src="app.js"></script>
</body>
</html>

That ends this tutorial. Happy Coding :)

Add new comment

159 views