angular: chante sortState from input to model (#28211)

generators/angular/templates/src/main/webapp/app/admin/configuration/configuration.component.html.ejs

@@ -27,7 +27,7 @@
 
     <table class="table table-striped table-bordered table-responsive d-table" aria-describedby="spring-configuration">
       <thead>
-        <tr <%= jhiPrefix %>Sort [sortState]="sortState" (sortChange)="sortState.set($event)">
+        <tr <%= jhiPrefix %>Sort [(sortState)]="sortState">
           <th <%= jhiPrefix %>SortBy="prefix" scope="col" class="w-40">
             <span>__jhiTranslateTag__('configuration.table.prefix')</span> <fa-icon icon="sort"></fa-icon>
           </th>

generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.html.ejs

@@ -40,7 +40,7 @@
 
     <table class="table table-sm table-striped table-bordered" aria-describedby="logs-page-heading">
       <thead>
-        <tr <%= jhiPrefix %>Sort [sortState]="sortState" (sortChange)="sortState.set($event)">
+        <tr <%= jhiPrefix %>Sort [(sortState)]="sortState">
           <th <%= jhiPrefix %>SortBy="name" scope="col"><span>__jhiTranslateTag__('logs.table.name')</span> <fa-icon icon="sort"></fa-icon></th>
           <th <%= jhiPrefix %>SortBy="level" scope="col"><span>__jhiTranslateTag__('logs.table.level')</span> <fa-icon icon="sort"></fa-icon></th>
         </tr>

generators/angular/templates/src/main/webapp/app/admin/user-management/list/user-management.component.html.ejs

@@ -39,7 +39,7 @@
   <div class="table-responsive">
     <table class="table table-striped" aria-describedby="user-management-page-heading">
       <thead>
-        <tr<% if (!databaseTypeCassandra) { %> <%= jhiPrefix %>Sort [sortState]="sortState" (sortChange)="transition($event)"<% } %>>
+        <tr<% if (!databaseTypeCassandra) { %> <%= jhiPrefix %>Sort [(sortState)]="sortState" (sortChange)="transition($event)"<% } %>>
           <th scope="col"<% if (!databaseTypeCassandra) { %> <%= jhiPrefix %>SortBy="id"<% } %>>
             <span>__jhiTranslateTag__('global.field.id')</span><% if (databaseType !== 'cassandra') { %> <fa-icon icon="sort"></fa-icon><% } %>
           </th>

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

@@ -64,17 +64,15 @@
     <<%= jhiPrefixDashed %>-filter [filters]="filters"></<%= jhiPrefixDashed %>-filter>
 <%_ } _%>
 
-@if (<%= entityInstancePlural %>?.length === 0) {
+@if ((<%= entityInstancePlural %>?.length ?? 0) === 0) {
     <div class="alert alert-warning" id="no-result">
         <span>__jhiTranslateTag__('<%- i18nKeyPrefix %>.home.notFound')</span>
     </div>
-}
-
-@if (<%= entityInstancePlural %> && <%= entityInstancePlural %>.length > 0) {
+} @else {
     <div class="table-responsive table-entities" id="entities">
         <table class="table table-striped" aria-describedby="page-heading">
             <thead>
-                <tr <%= jhiPrefix %>Sort [sortState]="sortState" (sortChange)="navigateToWithComponentValues($event)">
+                <tr <%= jhiPrefix %>Sort [(sortState)]="sortState" (sortChange)="navigateToWithComponentValues($event)">
 <%_ for (const field of fields.filter(field => !field.hidden)) { _%>
                     <th scope="col" <%= jhiPrefix %>SortBy="<%= field.fieldName %>">
                         <div class="d-flex">

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

@@ -29,7 +29,7 @@
 
   const componentName = entityAngularName + 'Component';
 _%>
-import { Component, computed, NgZone, inject, OnInit, signal, WritableSignal } from '@angular/core';
+import { Component, computed, effect, NgZone, inject, OnInit, signal, WritableSignal } from '@angular/core';
 <%_ if (!paginationNo) { _%>
 import { HttpHeaders } from '@angular/common/http';
 <%_ } _%>
@@ -195,24 +195,25 @@ export class <%= componentName %> implements OnInit {
 <%_ } _%>
 <%_ if (searchEngineAny) { _%>
     search(query: string): void {
+  <%_ if (paginationPagination) { _%>
+      this.page = 1;
+  <%_ } _%>
+      this.currentSearch = query;
   <%_ if (notSortableFieldsAfterSearch) { _%>
       const { predicate } = this.sortState();
       if (query && predicate && <%= componentName %>.NOT_SORTABLE_FIELDS_AFTER_SEARCH.includes(predicate)) {
-        this.loadDefaultSortState();
+        this.navigateToWithComponentValues(this.getDefaultSortState());
+        return;
       }
   <%_ } _%>
-  <%_ if (paginationPagination) { _%>
-      this.page = 1;
-  <%_ } _%>
-      this.currentSearch = query;
       this.navigateToWithComponentValues(this.sortState());
     }
 
-    loadDefaultSortState(): void {
+    getDefaultSortState(): SortState {
   <%_ if (notSortableFieldsAfterSearchFieldNames.includes(primaryKey.name)) { _%>
-      this.sortState.set({});
+      return {};
   <%_ } else { _%>
-      this.sortState.set(this.sortService.parseSortParam(this.activatedRoute.snapshot.data[DEFAULT_SORT_DATA]));
+      return this.sortService.parseSortParam(this.activatedRoute.snapshot.data[DEFAULT_SORT_DATA]);
   <%_ } _%>
     }
 <%_ } _%>

generators/angular/templates/src/main/webapp/app/shared/sort/sort-by.directive.spec.ts.ejs

@@ -31,7 +31,7 @@ import { SortState, sortStateSignal } from './sort-state';
   template: `
     <table>
       <thead>
-        <tr <%= jhiPrefix %>Sort [sortState]="sortState" (sortChange)="transition($event)">
+        <tr <%= jhiPrefix %>Sort [(sortState)]="sortState" (sortChange)="transition($event)">
           <th <%= jhiPrefix %>SortBy="name">
             ID
             <fa-icon [icon]="'sort'"></fa-icon>

generators/angular/templates/src/main/webapp/app/shared/sort/sort-by.directive.ts.ejs

@@ -40,7 +40,7 @@ export class SortByDirective {
     effect(() => {
       if (this.iconComponent()) {
         let icon: IconDefinition = this.sortIcon;
-        const { predicate, order } = this.sort.sortState()();
+        const { predicate, order } = this.sort.sortState();
         if (predicate === this.<%= jhiPrefix %>SortBy() && order !== undefined) {
           icon = order === 'asc' ? this.sortAscIcon : this.sortDescIcon;
         }

generators/angular/templates/src/main/webapp/app/shared/sort/sort.directive.spec.ts.ejs

@@ -28,7 +28,7 @@ import { SortState, sortStateSignal } from './sort-state';
   template: `
     <table>
       <thead>
-        <tr <%= jhiPrefix %>Sort [sortState]="sortState" (sortChange)="transition($event)"></tr>
+        <tr <%= jhiPrefix %>Sort [(sortState)]="sortState" (sortChange)="transition($event)"></tr>
       </thead>
     </table>
   `,

generators/angular/templates/src/main/webapp/app/shared/sort/sort.directive.ts.ejs

@@ -16,26 +16,22 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import { Directive, input, output, OutputEmitterRef } from '@angular/core';
-import { SortOrder, SortState, SortStateSignal } from './sort-state';
-
-export interface SortChangeDirective<T> {
-  sortChange: OutputEmitterRef<SortState>;
-
-  sort(field: T): void;
-}
+import { Directive, model, output } from '@angular/core';
+import { SortOrder, SortState } from './sort-state';
 
 @Directive({
   selector: '[<%= jhiPrefix %>Sort]',
 })
-export class SortDirective implements SortChangeDirective<string> {
-  readonly sortState = input.required<SortStateSignal>();
+export class SortDirective {
+  readonly sortState = model.required<SortState>();
 
   readonly sortChange = output<SortState>();
 
   sort(field: string): void {
-    const { predicate, order } = this.sortState()();
+    const { predicate, order } = this.sortState();
     const toggle = (): SortOrder => (order === 'asc' ? 'desc' : 'asc');
-    this.sortChange.emit({ predicate: field, order: field !== predicate ? 'asc' : toggle() });
+    const newSortState = { predicate: field, order: field !== predicate ? 'asc' : toggle() };
+    this.sortState.update(() => newSortState);
+    this.sortChange.emit(newSortState);
   }
 }