Once Kendo loader is shown and hidden, it resets the textbox type from password to text.
Can I get a solution to it.
As I need the kendoTextBoxPrefixTemplate and cant use the kendoTextBox API inside <input/> to use a [type] variable and
control the textBox type
Here is the sample code:
import { Component, AfterViewInit, OnInit, ViewChild } from'@angular/core';
import {
LoaderType,
LoaderThemeColor,
LoaderSize,
} from '@progress/kendo-angular-indicators';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { TextBoxComponent } from '@progress/kendo-angular-inputs';
@Component({
selector: 'my-app',
template: `
<div class="login-page--main-container">
<kendo-card class="login-page--kendo-card" *ngIf="!showLoader">
<div class="login-page--form-container">
<form [formGroup]="loginForm" class="login-page--login-form" (ngSubmit)="onSubmit()">
<div class="login-page--formfield">
<div class="login-page--formfield-user">
<kendo-formfield>
<kendo-textbox
class="login-page--textbox"
formControlName="username"
#username
required
placeholder="Username">
<ng-template kendoTextBoxPrefixTemplate>
<img src="assets/content/images/login-images/profile.svg" alt="new" class="login-page--user-img" />
</ng-template>
</kendo-textbox>
<kendo-formerror class="login-page-kendo-form-error">
Username is required
</kendo-formerror>
</kendo-formfield>
</div>
<kendo-formfield>
<kendo-textbox
#textbox
placeholder="Password"
[clearButton]="true"
class="login-page--textbox"
formControlName="password">
<ng-template kendoTextBoxSuffixTemplate>
<button kendoButton look="clear" (click)="togglePasswordVisibility()"> Eye </button>
</ng-template>
<ng-template kendoTextBoxPrefixTemplate>
<img src="assets/content/images/login-images/password.svg" alt="new" class="login-page--profile-img" />
</ng-template>
</kendo-textbox>
<kendo-formerror class="login-page-kendo-form-error">
Password is required
</kendo-formerror>
</kendo-formfield>
<div class="login-page--forgot-div">
<!-- Optional forgot password link -->
</div>
</div>
<div>
<button kendoButton class="login-page--signin-button" [disabled]="loginForm.invalid">
Sign In
</button>
</div>
</form>
</div>
</kendo-card>
<div class="app-screen--loader" *ngIf="showLoader">
<div class="example-item" *ngFor="let loader of loaders">
<div class="example-item-title">{{ loader.type | titlecase }}</div>
<div class="k-block">
<kendo-loader
[type]="loader.type"
[themeColor]="loader.themeColor"
[size]="loader.size"
>
</kendo-loader>
</div>
</div>
<div>Signing in....</div>
</div>
</div>
`,
})
export class AppComponent implements AfterViewInit {
public loginForm: FormGroup;
public showLoader = false;
public loaders = [
{
type: <LoaderType>'pulsing',
themeColor: <LoaderThemeColor>'primary',
size: <LoaderSize>'medium',
},
{
type: <LoaderType>'infinite-spinner',
themeColor: <LoaderThemeColor>'secondary',
size: <LoaderSize>'medium',
},
{
type: <LoaderType>'converging-spinner',
themeColor: <LoaderThemeColor>'info',
size: <LoaderSize>'medium',
},
];
@ViewChild('textbox') public textbox!: TextBoxComponent;
constructor() {
this.loginForm = new FormGroup({
username: new FormControl('', Validators.required),
password: new FormControl('', Validators.required),
});
}
public ngAfterViewInit(): void {
this.textbox.input.nativeElement.type = 'password';
}
public togglePasswordVisibility(): void {
const inputEl = this.textbox.input.nativeElement;
inputEl.type = inputEl.type === 'password' ? 'text' : 'password';
}
public async onSubmit() {
if (this.loginForm.valid) {
this.showLoader = true;
await new Promise((resolve) => setTimeout(resolve, 1000));
this.showLoader = false;
}
}
}