Setting the TextBox Type to Password

Environment

Description

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

Solution

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

   Copy Code@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.

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

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