Mostrar y ocultar el valor de un input tipo password

Seguramente hay muchos approaches pero el que estoy usando yo (para AngularJS) es el que voy a compartir por aquí. La idea es dar al usuario la opción de ver lo que está escribiendo como contraseña en un formulario a través de un botón - ícono de ojo que lo pueden encontrar en este link: https://material.io/tools/icons/?style=baseline

Los nombres de íconos que estoy utilizando son: visibility y visibility_off

So, let's start:

HTML

	<md-dialog-content>
	<div class="md-dialog-content-bu">
	<p class="md-body-2">{{ 'main.business_units.delete.CONFIRM' | translate }}</p>
	<md-input-container class="md-block">
	<label>{{ 'main.business_units.delete.ENTER_PASSWORD' | translate }}</label>
	<input id="business-unit-name-input"
	name="password"
	type="{{ businessUnitDeleteFormController.typePassword ? 'text' : 'password' }}"
	ng-model="businessUnitDeleteFormController.password"
	required
	md-no-asterisk>
	<md-icon ng-click="businessUnitDeleteFormController.togglePassword()"
	md-svg-src="{{
	businessUnitDeleteFormController.typePassword ?
	businessUnitDeleteFormController.iconResources.businessUnit.VISIBILITY_OFF :
	businessUnitDeleteFormController.iconResources.businessUnit.VISIBILITY }}">
	</md-icon>
	<div ng-messages="businessUnitForm.password.$error"
	ng-show="businessUnitForm.password.$touched">
	<div ng-message="required">{{ 'main.business_units.form.VALID_PASSWORD_EMPTY' | translate }}</div>
	</div>
	</md-input-container>
	</div>
	</md-dialog-content>

view raw index.html hosted with ❤ by GitHub

1. Agregamos una condicional en el type del input, de acuerdo a la condición será de tipo text o de tipo password.

2. Agregamos el ícono el cual tendrá un evento click.

3. El ícono será cambiado de acuerdo al flag que manejaremos desde el controller, entonces también vamos a manejar una condicional similar al punto 1.

CONTROLLER

1. Agregamos la función que manejará el valor de mostrar o no mostrar la contraseña.

	togglePassword() {
	this.typePassword = !this.typePassword;
	}

view raw index.js hosted with ❤ by GitHub

Easy, right?

Happy coding!