angular: convert isLoading/isSaving to signals (#31718)

Author: mshima

generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/list/_entityFile_.html.ejs

@@ -21,8 +21,8 @@
         <span>__jhiTranslateTag__('<%- i18nKeyPrefix %>.home.title')</span>
 
         <div class="d-flex justify-content-end">
-            <button class="btn btn-info me-2" (click)="load()" [disabled]="isLoading">
-                <fa-icon icon="sync" [animation]="isLoading ? 'spin' : undefined" />
+            <button class="btn btn-info me-2" (click)="load()" [disabled]="isLoading()">
+                <fa-icon icon="sync" [animation]="isLoading() ? 'spin' : undefined" />
                 <span>__jhiTranslateTag__('<%- i18nKeyPrefix %>.home.refreshListLabel')</span>
             </button>
             <%_ if (!readOnly) { _%>

generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/list/_entityFile_.ts.ejs

@@ -34,7 +34,7 @@ import { Component, computed, effect, inject, OnInit, signal, WritableSignal } f
 import { HttpHeaders } from '@angular/common/http';
 <%_ } _%>
 import { ActivatedRoute, Data, ParamMap, Router, RouterLink } from '@angular/router';
-import { combineLatest<%_ if (!readOnly) { _%>, filter<%_ } _%>, Observable, Subscription, tap } from 'rxjs';
+import { combineLatest<%_ if (!readOnly) { _%>, filter<%_ } _%>, finalize, Observable, Subscription, tap } from 'rxjs';
 <%_ if (!readOnly) { _%>
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 <%_ } _%>
@@ -137,7 +137,7 @@ export class <%= componentName %> implements OnInit {
 <%_ } _%>
     subscription: Subscription | null = null;
     <%= entityInstancePlural %> = signal<I<%= entityAngularName %>[]>([]);
-    isLoading = false;
+    isLoading = signal(false);
 
     sortState = sortStateSignal({});
 <%_ if (searchEngineAny) { _%>
@@ -365,7 +365,7 @@ export class <%= componentName %> implements OnInit {
       } = this;
 <%_ } _%>
 
-      this.isLoading = true;
+      this.isLoading.set(true);
 <%_ if (paginationPagination) { _%>
       const pageToLoad: number = page;
 <%_ } _%>
@@ -403,13 +403,13 @@ export class <%= componentName %> implements OnInit {
       if (this.currentSearch && this.currentSearch !== '') {
         return this.<%= entityInstance %>Service.search(queryObject)
           .pipe(
-            tap(() => this.isLoading = false)
+            finalize(() => this.isLoading.set(false))
           );
       } else {
 <%_ } _%>
         return this.<%= entityInstance %>Service.query(queryObject)
           .pipe(
-            tap(() => this.isLoading = false)
+            finalize(() => this.isLoading.set(false))
           );
 <%_ if (searchEngineAny) { _%>
       }

generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/update/_entityFile_-update.html.ejs

@@ -216,7 +216,7 @@ _%>
                     <fa-icon icon="ban" />&nbsp;<span>__jhiTranslateTag__('entity.action.cancel')</span>
                 </button>
 
-                <button type="submit" id="save-entity" data-cy="entityCreateSaveButton" [disabled]="editForm.invalid || isSaving" class="btn btn-primary">
+                <button type="submit" id="save-entity" data-cy="entityCreateSaveButton" [disabled]="editForm.invalid || isSaving()" class="btn btn-primary">
                     <fa-icon icon="save" />&nbsp;<span>__jhiTranslateTag__('entity.action.save')</span>
                 </button>
             </div>

generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/update/_entityFile_-update.spec.ts.ejs

@@ -185,15 +185,15 @@ describe('<%= entityAngularName %> Management Update Component', () => {
 
             // WHEN
             comp.save();
-            expect(comp.isSaving).toEqual(true);
+            expect(comp.isSaving()).toEqual(true);
             saveSubject.next(new HttpResponse({ body: <%= entityInstance %> }));
             saveSubject.complete();
 
             // THEN
             expect(<%= entityInstance %>FormService.get<%= entityAngularName %>).toHaveBeenCalled();
             expect(comp.previousState).toHaveBeenCalled();
             expect(<%= entityInstance %>Service.update).toHaveBeenCalledWith(expect.objectContaining(<%= entityInstance %>));
-            expect(comp.isSaving).toEqual(false);
+            expect(comp.isSaving()).toEqual(false);
         });
 
 <%_ } _%>
@@ -209,14 +209,14 @@ describe('<%= entityAngularName %> Management Update Component', () => {
 
             // WHEN
             comp.save();
-            expect(comp.isSaving).toEqual(true);
+            expect(comp.isSaving()).toEqual(true);
             saveSubject.next(new HttpResponse({ body: <%= entityInstance %> }));
             saveSubject.complete();
 
             // THEN
             expect(<%= entityInstance %>FormService.get<%= entityAngularName %>).toHaveBeenCalled();
             expect(<%= entityInstance %>Service.create).toHaveBeenCalled();
-            expect(comp.isSaving).toEqual(false);
+            expect(comp.isSaving()).toEqual(false);
             expect(comp.previousState).toHaveBeenCalled();
         });
 <%_ if (updatableEntity) { _%>
@@ -232,12 +232,12 @@ describe('<%= entityAngularName %> Management Update Component', () => {
 
             // WHEN
             comp.save();
-            expect(comp.isSaving).toEqual(true);
+            expect(comp.isSaving()).toEqual(true);
             saveSubject.error('This is an error!');
 
             // THEN
             expect(<%= entityInstance %>Service.update).toHaveBeenCalled();
-            expect(comp.isSaving).toEqual(false);
+            expect(comp.isSaving()).toEqual(false);
             expect(comp.previousState).not.toHaveBeenCalled();
         });
 <%_ } _%>

generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/update/_entityFile_-update.ts.ejs

@@ -67,7 +67,7 @@ import { <%- importedType %> } from '<%- importedPath %>';
 TranslateDirective, TranslateModule,<%_ } _%>NgbModule, FontAwesomeModule, AlertError, ReactiveFormsModule],
 })
 export class <%= entityAngularName %>Update implements OnInit {
-    isSaving = false;
+    isSaving = signal(false);
     <%= entityInstance %>: I<%= entityAngularName %> | null = null;
 <%_ enumImports.forEach( (importedPath, importedType) => { _%>
     <%- this._.lowerFirst(importedType) %>Values = Object.keys(<%- importedType %>);
@@ -164,7 +164,7 @@ _%>
     }
 
     save(): void {
-        this.isSaving = true;
+        this.isSaving.set(true);
         const <%= entityInstance %> = this.<%= entityInstance %>FormService.get<%= entityAngularName %>(this.editForm);
 <%_ if (updatableEntity) { _%>
         if (<%= entityInstance %>.<%= primaryKey.name %> === null) {
@@ -193,7 +193,7 @@ _%>
     }
 
     protected onSaveFinalize(): void {
-        this.isSaving = false;
+        this.isSaving.set(false);
     }
 
     protected updateForm(<%= entityInstance %>: I<%= entityAngularName %>): void {