Setting the TextBox Type to Password

Environment

Product

Progress® Kendo UI® TextBox for Angular

Description

How can I set the type of the TextBox component to password?

Solution

As of version v14.3.0, the TextBox component provides a built-in type property.

1. Access the inner <input /> HTML element of the TextBox and set the type attribute to password.

   ts

   @ViewChild('password') public textbox: TextBoxComponent;
   
   public ngAfterViewInit(): void {
       this.textbox.input.nativeElement.type = 'password';
   }

   Upvote and subscribe to the built-in TextBox type property feature request.

2. (Optional) Тo toggle the password visibility, use the kendoTextBoxSuffixTemplate directive and implement a button. In the click handler, set the type attribute to text or password based on a condition.

   html

   <ng-template kendoTextBoxSuffixTemplate>
       <button kendoButton ...
          (click)="toggleVisibility()">
       </button>
   </ng-template>

   ts

   public toggleVisibility(): void {
       const inputEl = this.textbox.input.nativeElement;
       inputEl.type = inputEl.type === 'password' ? 'text' : 'password';
   }

The following example demonstrates how to apply the password type to the TextBox component.

Change Theme

Theme

Loading ...