angular: migrate to signals

generators/angular/templates/src/main/webapp/app/shared/filter/filter.component.html.ejs

@@ -1,11 +1,11 @@
-@if (filters.hasAnyFilterSet()) {
+@if (filters().hasAnyFilterSet()) {
   <div class="filter-display">
     <span>__jhiTranslateTag__('entity.filters.set')</span>
     <button class="btn" (click)="clearAllFilters()" (keydown.enter)="clearAllFilters()">
       <fa-icon icon="times" title="__jhiTranslatePipe__('entity.filters.clearAll')"></fa-icon>
     </button>
     <ul>
-      @for (filterOption of filters.filterOptions; track filterOption.name) {
+      @for (filterOption of filters().filterOptions; track filterOption.name) {
         @for (value of filterOption.values; track value) {
           <li>
             <span>{{ filterOption.name }}:</span> {{ value }}

generators/angular/templates/src/main/webapp/app/shared/filter/filter.component.ts.ejs

@@ -1,6 +1,6 @@
-import { Component, Input } from '@angular/core';
-import { IFilterOptions } from './filter.model';
+import { Component, input } from '@angular/core';
 import SharedModule from '../shared.module';
+import { IFilterOptions } from './filter.model';
 
 @Component({
   standalone: true,
@@ -9,13 +9,13 @@ import SharedModule from '../shared.module';
   templateUrl: './filter.component.html',
 })
 export default class FilterComponent {
-  @Input() filters!: IFilterOptions;
+  readonly filters = input.required<IFilterOptions>();
 
   clearAllFilters(): void {
-    this.filters.clear();
+    this.filters().clear();
   }
 
   clearFilter(filterName: string, value: string): void {
-    this.filters.removeFilter(filterName, value);
+    this.filters().removeFilter(filterName, value);
   }
 }

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

@@ -16,7 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import { inject, Input, Directive, ElementRef, OnChanges, OnInit, OnDestroy } from '@angular/core';
+import { Directive, ElementRef, OnChanges, OnDestroy, OnInit, inject, input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -31,8 +31,8 @@ import { translationNotFoundMessage } from 'app/config/translation.config';
   selector: '[<%= jhiPrefix %>Translate]',
 })
 export default class TranslateDirective implements OnChanges, OnInit, OnDestroy {
-  @Input() <%= jhiPrefix %>Translate!: string;
-  @Input() translateValues?: Record<string, unknown>;
+  readonly <%= jhiPrefix %>Translate = input.required<string>();
+  readonly translateValues = input<Record<string, unknown>>();
 
   private readonly directiveDestroyed = new Subject();
 
@@ -59,13 +59,13 @@ export default class TranslateDirective implements OnChanges, OnInit, OnDestroy
 
   private getTranslation(): void {
     this.translateService
-      .get(this.<%= jhiPrefix %>Translate, this.translateValues)
+      .get(this.<%= jhiPrefix %>Translate(), this.translateValues())
       .pipe(takeUntil(this.directiveDestroyed))
       .subscribe({
         next: value => {
           this.el.nativeElement.innerHTML = value;
         },
-        error: () => `${translationNotFoundMessage}[${this.<%= jhiPrefix %>Translate}]`
+        error: () => `${translationNotFoundMessage}[${this.<%= jhiPrefix %>Translate()}]`,
       });
   }
 }

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

@@ -78,7 +78,7 @@ describe('Directive: SortByDirective', () => {
     fixture.detectChanges();
 
     // THEN
-    expect(sortByDirective.<%= jhiPrefix %>SortBy).toEqual('name');
+    expect(sortByDirective.<%= jhiPrefix %>SortBy()).toEqual('name');
     expect(sortByDirective.iconComponent()?.icon).toEqual(faSort.iconName);
   });
 
@@ -91,7 +91,7 @@ describe('Directive: SortByDirective', () => {
     fixture.detectChanges();
 
     // THEN
-    expect(sortByDirective.<%= jhiPrefix %>SortBy).toEqual('name');
+    expect(sortByDirective.<%= jhiPrefix %>SortBy()).toEqual('name');
     expect(sortByDirective.iconComponent()?.icon).toEqual(faSortUp.iconName);
   });
 
@@ -104,7 +104,7 @@ describe('Directive: SortByDirective', () => {
     fixture.detectChanges();
 
     // THEN
-    expect(sortByDirective.<%= jhiPrefix %>SortBy).toEqual('name');
+    expect(sortByDirective.<%= jhiPrefix %>SortBy()).toEqual('name');
     expect(sortByDirective.iconComponent()?.icon).toEqual(faSortDown.iconName);
   });
 
@@ -117,7 +117,7 @@ describe('Directive: SortByDirective', () => {
     fixture.detectChanges();
 
     // THEN
-    expect(sortByDirective.<%= jhiPrefix %>SortBy).toEqual('name');
+    expect(sortByDirective.<%= jhiPrefix %>SortBy()).toEqual('name');
     expect(sortByDirective.iconComponent()?.icon).toEqual(faSort.iconName);
   });
 

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

@@ -16,9 +16,9 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import { Directive, HostListener, Input, contentChild, effect, inject } from '@angular/core';
+import { Directive, HostListener, contentChild, effect, inject, input } from '@angular/core';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { faSort, faSortDown, faSortUp, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { IconDefinition, faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons';
 
 import { SortDirective } from './sort.directive';
 
@@ -27,7 +27,7 @@ import { SortDirective } from './sort.directive';
   selector: '[<%= jhiPrefix %>SortBy]',
 })
 export class SortByDirective {
-  @Input() <%= jhiPrefix %>SortBy!: string;
+  readonly <%= jhiPrefix %>SortBy = input.required<string>();
 
   iconComponent = contentChild(FaIconComponent);
 
@@ -41,8 +41,8 @@ export class SortByDirective {
     effect(() => {
       if (this.iconComponent()) {
         let icon: IconDefinition = this.sortIcon;
-        const { predicate, order } = this.sort.sortState();
-        if (predicate === this.<%= jhiPrefix %>SortBy && order !== undefined) {
+        const { predicate, order } = this.sort.sortState()();
+        if (predicate === this.<%= jhiPrefix %>SortBy() && order !== undefined) {
           icon = order === 'asc' ? this.sortAscIcon : this.sortDescIcon;
         }
         this.iconComponent()!.icon = icon.iconName;
@@ -54,7 +54,7 @@ export class SortByDirective {
   @HostListener('click')
   onClick(): void {
     if (this.iconComponent()) {
-      this.sort.sort(this.<%= jhiPrefix %>SortBy);
+      this.sort.sort(this.<%= jhiPrefix %>SortBy());
     }
   }
 }

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

@@ -16,7 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import { Directive, EventEmitter, Input, Output } from '@angular/core';
+import { Directive, EventEmitter, input, Output } from '@angular/core';
 import { SortOrder, SortState, SortStateSignal } from './sort-state';
 
 export interface SortChangeDirective<T> {
@@ -30,12 +30,12 @@ export interface SortChangeDirective<T> {
   selector: '[<%= jhiPrefix %>Sort]',
 })
 export class SortDirective implements SortChangeDirective<string> {
-  @Input() sortState!: SortStateSignal;
+  readonly sortState = input.required<SortStateSignal>();
 
   @Output() sortChange = new EventEmitter<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() });
   }