# CICADA

### File

`src/app/auth/_directives/password-toggle.directive.ts`

### Description

Toggle password form field input visibility

### Metadata

Selector | `[appPasswordToggle]`

### Index

###### Methods

- togglePasswordVisibility

###### Inputs

- iconId
- id

### Constructor

`constructor(elementRef: ElementRef, renderer: Renderer2)`
Defined in src/app/auth/_directives/password-toggle.directive.ts:15

Handle click events on the html element.

Parameters :

Name | Type | Optional | Description

elementRef

`ElementRef`

No

`

- A wrapper around a native element inside of a View.

`

renderer

`Renderer2`

No

`

- Extend this base class to implement custom rendering.

`

### Inputs

iconId
Type : `string`
Defined in src/app/auth/_directives/password-toggle.directive.ts:15
The password form field icon id

id
Type : `string`
Defined in src/app/auth/_directives/password-toggle.directive.ts:11
The password form field id

### Methods

togglePasswordVisibility
`togglePasswordVisibility()`
Defined in src/app/auth/_directives/password-toggle.directive.ts:30
Toggle the visibility of the password input field value and accompanying icon. Returns : `void`

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

    /** Toggle password form field input visibility */
    @Directive({
      selector: '[appPasswordToggle]',
    })
    export class PasswordToggleDirective {
      /** The password form field id */
      @Input()
      id: string;

      /** The password form field icon id */
      @Input()
      iconId: string;

      /**
       * Handle click events on the html element.
       *
       * @param elementRef - A wrapper around a native element inside of a View.
       * @param renderer - Extend this base class to implement custom rendering.
       */
      constructor(private elementRef: ElementRef, private renderer: Renderer2) {
        this.renderer.listen(this.elementRef.nativeElement, 'click', () => {
          this.togglePasswordVisibility();
        });
      }

      /** Toggle the visibility of the password input field value and accompanying icon. */
      togglePasswordVisibility(): void {
        const password: HTMLElement = document.getElementById(this.id);
        const icon: HTMLElement = document.getElementById(this.iconId);
        // @ts-ignore
        if (password.type === 'password') {
          // @ts-ignore
          password.type = 'text';
          icon.classList.remove('fa-eye');
          icon.classList.add('fa-eye-slash');
        } else {
          // @ts-ignore
          password.type = 'password';
          icon.classList.remove('fa-eye-slash');
          icon.classList.add('fa-eye');
        }
      }
    }

# result-matching ""

# No results matching ""