New to Kendo UI for Angular? Start a free 30-day trial

Setting the TextBox Type to Password


ProductProgress® Kendo UI® TextBox for Angular


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


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

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

    <ng-template kendoTextBoxSuffixTemplate>
        <button kendoButton ...
    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.

View Source
Change Theme:

In this article

Not finding the help you need?