angular: convert more fields to signal (#31727)

mshima · web-flow · commit cb8a0bf93e65 · 2025-12-17T20:22:41.000Z
diff --git a/generators/angular/templates/src/main/webapp/app/admin/user-management/list/user-management.html.ejs b/generators/angular/templates/src/main/webapp/app/admin/user-management/list/user-management.html.ejs
@@ -137,14 +137,14 @@
 
   <div>
     <div class="d-flex justify-content-center">
-      <<%= jhiPrefixDashed %>-item-count [params]="{ page, totalItems: totalItems(), itemsPerPage }" />
+      <<%= jhiPrefixDashed %>-item-count [params]="{ page: page(), totalItems: totalItems(), itemsPerPage: itemsPerPage() }" />
     </div>
 
     <div class="d-flex justify-content-center">
       <ngb-pagination
         [collectionSize]="totalItems()"
         [(page)]="page"
-        [pageSize]="itemsPerPage"
+        [pageSize]="itemsPerPage()"
         [maxSize]="5"
         [rotate]="true"
         [boundaryLinks]="true"
diff --git a/generators/angular/templates/src/main/webapp/app/admin/user-management/list/user-management.ts.ejs b/generators/angular/templates/src/main/webapp/app/admin/user-management/list/user-management.ts.ejs
@@ -72,8 +72,8 @@ export default class UserManagement implements OnInit {
   isLoading = signal(false);
 <%_ if (!databaseTypeCassandra) { _%>
   totalItems = signal(0);
-  itemsPerPage = ITEMS_PER_PAGE;
-  page!: number;
+  itemsPerPage = signal(ITEMS_PER_PAGE);
+  page = signal(0);
   sortState = sortStateSignal({});
 <%_ } _%>
 
@@ -116,8 +116,8 @@ export default class UserManagement implements OnInit {
     this.isLoading.set(true);
     this.userService
       .query(<% if (!databaseTypeCassandra) { %>{
-        page: this.page - 1,
-        size: this.itemsPerPage,
+        page: this.page() - 1,
+        size: this.itemsPerPage(),
         sort: this.sortService.buildSortParam(this.sortState(), 'id'),
       }<% } %>)
       .subscribe({
@@ -134,7 +134,7 @@ export default class UserManagement implements OnInit {
     this.router.navigate(['./'], {
       relativeTo: this.activatedRoute.parent,
       queryParams: {
-        page: this.page,
+        page: this.page(),
         sort: this.sortService.buildSortParam(sortState ?? this.sortState()),
       },
     });
@@ -143,7 +143,7 @@ export default class UserManagement implements OnInit {
   private handleNavigation(): void {
     combineLatest([this.activatedRoute.data, this.activatedRoute.queryParamMap]).subscribe(([data, params]) => {
       const page = params.get('page');
-      this.page = +(page ?? 1);
+      this.page.set(+(page ?? 1));
       this.sortState.set(this.sortService.parseSortParam(params.get(SORT) ?? data.defaultSort));
       this.loadAll();
     });
diff --git a/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/list/_entityFile_.html.ejs b/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/list/_entityFile_.html.ejs
@@ -46,11 +46,11 @@
                 <label class="visually-hidden" for="currentSearch">__jhiTranslateTag__('<%- i18nKeyPrefix %>.home.search')</label>
                 <input type="text" class="form-control" [(ngModel)]="currentSearch" id="currentSearch" name="currentSearch" placeholder="__jhiTranslatePipe__('<%= i18nKeyPrefix %>.home.search')">
 
-                <button class="btn btn-info" (click)="search(currentSearch)">
+                <button class="btn btn-info" (click)="search(currentSearch())">
                     <fa-icon icon="search" />
                 </button>
 
-            @if (currentSearch) {
+            @if (currentSearch()) {
                 <button class="btn btn-danger" (click)="search('')">
                     <fa-icon icon="trash-alt" />
                 </button>
@@ -226,11 +226,11 @@ _%>
 @if (<%= entityInstancePlural %>().length > 0) {
     <div>
         <div class="d-flex justify-content-center">
-            <<%= jhiPrefixDashed %>-item-count [params]="{ page, totalItems, itemsPerPage }" />
+            <<%= jhiPrefixDashed %>-item-count [params]="{ page: page(), totalItems: totalItems(), itemsPerPage: itemsPerPage() }" />
         </div>
 
         <div class="d-flex justify-content-center">
-            <ngb-pagination [collectionSize]="totalItems" [page]="page" [pageSize]="itemsPerPage" [maxSize]="5" [rotate]="true" [boundaryLinks]="true" (pageChange)="navigateToPage($event)" />
+            <ngb-pagination [collectionSize]="totalItems()" [page]="page()" [pageSize]="itemsPerPage()" [maxSize]="5" [rotate]="true" [boundaryLinks]="true" (pageChange)="navigateToPage($event)" />
         </div>
     </div>
 }
diff --git a/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/list/_entityFile_.ts.ejs b/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/list/_entityFile_.ts.ejs
@@ -141,18 +141,18 @@ export class <%= componentName %> implements OnInit {
 
     sortState = sortStateSignal({});
 <%_ if (searchEngineAny) { _%>
-    currentSearch = '';
+    currentSearch = signal('');
 <%_ } _%>
 <%_ if (jpaMetamodelFiltering && paginationPagination) { _%>
     filters: IFilterOptions = new FilterOptions();
 <%_ } _%>
 
 <%_ if (paginationPagination) { _%>
-  itemsPerPage = ITEMS_PER_PAGE;
-  totalItems = 0;
-  page = 1;
+  itemsPerPage = signal(ITEMS_PER_PAGE);
+  totalItems = signal(0);
+  page = signal(1);
 <%_ } else if (paginationInfiniteScroll) { _%>
-    itemsPerPage = ITEMS_PER_PAGE;
+    itemsPerPage = signal(ITEMS_PER_PAGE);
     links: WritableSignal<Record<string, undefined | Record<string, string | undefined>>> = signal({});
     hasMorePage = computed(() => !!this.links().next);
     isFirstFetch = computed(() => Object.keys(this.links()).length === 0);
@@ -213,9 +213,9 @@ export class <%= componentName %> implements OnInit {
 <%_ if (searchEngineAny) { _%>
     search(query: string): void {
   <%_ if (paginationPagination) { _%>
-      this.page = 1;
+      this.page.set(1);
   <%_ } _%>
-      this.currentSearch = query;
+      this.currentSearch.set(query);
   <%_ if (notSortableFieldsAfterSearch) { _%>
       const { predicate } = this.sortState();
       if (query && predicate && <%= componentName %>.NOT_SORTABLE_FIELDS_AFTER_SEARCH.includes(predicate)) {
@@ -263,27 +263,27 @@ export class <%= componentName %> implements OnInit {
     }
 
     navigateToWithComponentValues(event: SortState): void {
-      this.handleNavigation(<% if (paginationPagination) { %>this.page, <% } %>event<% if (jpaMetamodelFiltering && paginationPagination) { %>, this.filters.filterOptions<% } %><% if (searchEngineAny) { %>, this.currentSearch<% } %>);
+      this.handleNavigation(<% if (paginationPagination) { %>this.page(), <% } %>event<% if (jpaMetamodelFiltering && paginationPagination) { %>, this.filters.filterOptions<% } %><% if (searchEngineAny) { %>, this.currentSearch()<% } %>);
     }
 
 <%_ if (paginationPagination) { _%>
     navigateToPage(page: number): void {
-      this.handleNavigation(page, this.sortState()<% if (jpaMetamodelFiltering && paginationPagination) { %>, this.filters.filterOptions<% } %><% if (searchEngineAny) { %>, this.currentSearch<% } %>);
+      this.handleNavigation(page, this.sortState()<% if (jpaMetamodelFiltering && paginationPagination) { %>, this.filters.filterOptions<% } %><% if (searchEngineAny) { %>, this.currentSearch()<% } %>);
     }
 
 <%_ } _%>
     protected fillComponentAttributeFromRoute(params: ParamMap, data: Data): void {
 <%_ if (paginationPagination) { _%>
       const page = params.get(PAGE_HEADER);
-      this.page = +(page ?? 1);
+      this.page.set(+ (page ?? 1));
 <%_ } _%>
       this.sortState.set(this.sortService.parseSortParam(params.get(SORT) ?? data[DEFAULT_SORT_DATA]));
 <%_ if (jpaMetamodelFiltering && paginationPagination) { _%>
       this.filters.initializeFromParams(params);
 <%_ } _%>
 <%_ if (searchEngineAny) { _%>
       if (params.has('search') && params.get('search') !== '') {
-        this.currentSearch = params.get('search') as string;
+        this.currentSearch.set(params.get('search') as string);
   <%_ if (notSortableFieldsAfterSearch) { _%>
           const { predicate } = this.sortState();
           if (predicate && <%= componentName %>.NOT_SORTABLE_FIELDS_AFTER_SEARCH.includes(predicate)) {
@@ -338,7 +338,7 @@ export class <%= componentName %> implements OnInit {
 <%_ if (!paginationNo) { _%>
     protected fillComponentAttributesFromResponseHeader(headers: HttpHeaders): void {
   <%_ if (paginationPagination) { _%>
-      this.totalItems = Number(headers.get(TOTAL_COUNT_RESPONSE_HEADER));
+      this.totalItems.set(Number(headers.get(TOTAL_COUNT_RESPONSE_HEADER)));
   <%_ } else if (paginationInfiniteScroll) { _%>
       const linkHeader = headers.get('link');
       if (linkHeader) {
@@ -351,43 +351,29 @@ export class <%= componentName %> implements OnInit {
 
 <%_ } _%>
     protected queryBackend(): Observable<EntityArrayResponseType> {
-<%_ if (paginationPagination || searchEngineAny) { _%>
-      const {
-  <%_ if (paginationPagination) { _%>
-        page,
-  <%_ } _%>
-  <%_ if (jpaMetamodelFiltering && paginationPagination) { _%>
-        filters,
-  <%_ } _%>
-  <%_ if (searchEngineAny) { _%>
-        currentSearch,
-  <%_ } _%>
-      } = this;
-<%_ } _%>
-
       this.isLoading.set(true);
 <%_ if (paginationPagination) { _%>
-      const pageToLoad: number = page;
+      const pageToLoad: number = this.page();
 <%_ } _%>
       const queryObject<% if ((jpaMetamodelFiltering && paginationPagination) || searchEngine) { %>: any <% } %> = {
 <%_ if (paginationPagination) { _%>
         page: pageToLoad - 1,
 <%_ } _%>
 <%_ if (!paginationNo) { _%>
-        size: this.itemsPerPage,
+        size: this.itemsPerPage(),
 <%_ } _%>
 <%_ if(implementsEagerLoadApis || containsBagRelationships) { _%>
         eagerload: true,
 <%_ } _%>
 <%_ if (searchEngineAny) { _%>
-        query: currentSearch,
+        query: this.currentSearch(),
 <%_ } _%>
 <%_ if (!paginationInfiniteScroll) { _%>
         sort: this.sortService.buildSortParam(this.sortState()),
 <%_ } _%>
       };
 <%_ if (jpaMetamodelFiltering && paginationPagination) { _%>
-      for (const filterOption of filters.filterOptions) {
+      for (const filterOption of this.filters.filterOptions) {
         queryObject[filterOption.name] = filterOption.values;
       }
 <%_ } _%>
@@ -400,7 +386,7 @@ export class <%= componentName %> implements OnInit {
 
 <%_ } _%>
 <%_ if (searchEngineAny) { _%>
-      if (this.currentSearch && this.currentSearch !== '') {
+      if (this.currentSearch() && this.currentSearch() !== '') {
         return this.<%= entityInstance %>Service.search(queryObject)
           .pipe(
             finalize(() => this.isLoading.set(false))
@@ -427,7 +413,7 @@ export class <%= componentName %> implements OnInit {
 <%_ } _%>
 <%_ if (paginationPagination) { _%>
         page,
-        size: this.itemsPerPage,
+        size: this.itemsPerPage(),
 <%_ } _%>
         sort: this.sortService.buildSortParam(sortState),
       };
