Check out this snippet of HTML code:
<form class="k-form-inline" [formGroup]="catalogForm" (ngSubmit)="onSubmit()" (keyup.enter)="onSubmit()">
<button class="k-button k-primary" style="width:100px" [disabled]="loading" style="margin-right:15px" >
<span class="k-icon k-i-zoom" style="padding-right: 20px"> </span>Search
</button>
<span *ngIf="loading" class="k-icon k-i-loading" style="font-size: 16px; padding-left:10px"></span>
</form>
This is the component part:
public loading : boolean = false;
onSubmit() {
this.loading = true;
this.Service.subscribe(res => {this.loading = false;})
}
Additionally, here is the service code snippet for you to review:
export class ProductService extends BehaviorSubject<GridDataResult>{
constructor(private http: HttpClient)
{ super(null); }
protected fetch(state: any, searchForm: ProductCatalogSearch,CustomerGroupCode : string): Observable<GridDataResult> {
searchForm.CustomerGroupCode = CustomerGroupCode;
return this.http
.post<any>(this.rootURL + '/product/catalogsearch', searchForm)
.pipe(
map(response => (<GridDataResult>{
data: response,
total: (response as any[]).length
}))
);
}
public query(state: any, searchForm: ProductCatalogSearch, CustomerGroupCode: string): void {
this.fetch(state, searchForm,CustomerGroupCode)
.subscribe(x => super.next(x));
}
}
Although the functionality works perfectly on the initial button click after a page load or refresh, subsequent clicks seem to deactivate it. The 'loading' variable does not update on subsequent clicks. Any ideas on what might be causing this issue?