refactor: migrate inputs and outputs to signals

Author: autowp

src/app/articles/list/list.component.html

@@ -43,7 +43,9 @@ <h1 i18n>Articles</h1>
       }
     </ul>
 
-    <app-paginator [data]="response.paginator"></app-paginator>
+    @if (response.paginator) {
+      <app-paginator [data]="response.paginator"></app-paginator>
+    }
   </div>
 } @else {
   <div class="spinner-border" role="status"><span class="visually-hidden" i18n>Loading…</span></div>

src/app/brands/item/item.component.html

@@ -21,7 +21,7 @@
     [routerLink]="['/', brand.catname]"
     class="brandicon"
     [ngClass]="'brandicon-' + cssClass(brand)"
-    [ngStyle]="{'background-image': 'url(' + icons?.image + ')'}"
+    [ngStyle]="{'background-image': 'url(' + icons()?.image + ')'}"
   ></a>
   <h4>
     <a [routerLink]="['/', brand.catname]" [textContent]="brand.name"></a>

src/app/brands/item/item.component.ts

@@ -1,11 +1,12 @@
 import {AsyncPipe, NgClass, NgIf, NgStyle} from '@angular/common';
-import {Component, inject, Input} from '@angular/core';
+import {Component, inject, input} from '@angular/core';
+import {toObservable} from '@angular/core/rxjs-interop';
 import {RouterLink} from '@angular/router';
 import {APIBrandsListItem, BrandIcons, NewItemsRequest} from '@grpc/spec.pb';
 import {ItemsClient} from '@grpc/spec.pbsc';
 import {NgbPopover} from '@ng-bootstrap/ng-bootstrap';
 import {LanguageService} from '@services/language';
-import {BehaviorSubject, EMPTY} from 'rxjs';
+import {EMPTY} from 'rxjs';
 import {switchMap} from 'rxjs/operators';
 
 @Component({
@@ -17,12 +18,10 @@ export class BrandsItemComponent {
   readonly #itemsClient = inject(ItemsClient);
   readonly #languageService = inject(LanguageService);
 
-  @Input() set brand(item: APIBrandsListItem) {
-    this.brand$.next(item);
-  }
-  protected readonly brand$ = new BehaviorSubject<APIBrandsListItem | null>(null);
+  readonly brand = input.required<APIBrandsListItem>();
+  protected readonly brand$ = toObservable(this.brand);
 
-  @Input() icons?: BrandIcons;
+  readonly icons = input.required<BrandIcons>();
 
   protected readonly response$ = this.brand$.pipe(
     switchMap((brand) =>

src/app/cars/specifications-editor/engine/engine.component.ts

@@ -1,13 +1,14 @@
 import {AsyncPipe} from '@angular/common';
-import {Component, EventEmitter, inject, Input, Output} from '@angular/core';
+import {Component, inject, input, output} from '@angular/core';
+import {toObservable} from '@angular/core/rxjs-interop';
 import {RouterLink} from '@angular/router';
 import {APIItem, UpdateItemRequest} from '@grpc/spec.pb';
 import {ItemFields, ItemRequest} from '@grpc/spec.pb';
 import {ItemsClient} from '@grpc/spec.pbsc';
 import {FieldMask} from '@ngx-grpc/well-known-types';
 import {AuthService, Role} from '@services/auth.service';
 import {LanguageService} from '@services/language';
-import {BehaviorSubject, Observable, of} from 'rxjs';
+import {Observable, of} from 'rxjs';
 import {shareReplay, switchMap} from 'rxjs/operators';
 
 import {ToastsService} from '../../../toasts/toasts.service';
@@ -23,12 +24,10 @@ export class CarsSpecificationsEditorEngineComponent {
   readonly #toastService = inject(ToastsService);
   readonly #languageService = inject(LanguageService);
 
-  @Input() set item(item: APIItem) {
-    this.item$.next(item);
-  }
-  protected readonly item$ = new BehaviorSubject<APIItem | null>(null);
+  readonly item = input.required<APIItem>();
+  protected readonly item$ = toObservable(this.item);
 
-  @Output() changed = new EventEmitter<void>();
+  readonly changed = output<void>();
   protected readonly isAllowedEditEngine$ = this.#auth
     .hasRole$(Role.CARS_MODER)
     .pipe(shareReplay({bufferSize: 1, refCount: false}));
@@ -65,7 +64,7 @@ export class CarsSpecificationsEditorEngineComponent {
       )
       .subscribe({
         error: (response: unknown) => this.#toastService.handleError(response),
-        next: () => this.changed.emit(),
+        next: () => this.changed.emit(void 0),
       });
   }
 

src/app/cars/specifications-editor/engine/select/tree-item/tree-item.component.html

@@ -1,4 +1,4 @@
-@if (item) {
+@if (item(); as item) {
   @if ((item.item?.childsCount || 0) > 0) {
     <div>
       <i class="bi bi-folder2 me-1" aria-hidden="true" [hidden]="open"></i>

src/app/cars/specifications-editor/engine/select/tree-item/tree-item.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, inject, Input, Output} from '@angular/core';
+import {Component, inject, input, output} from '@angular/core';
 import {
   ItemFields,
   ItemListOptions,
@@ -24,16 +24,16 @@ export class CarsSelectEngineTreeItemComponent {
   readonly #itemsClient = inject(ItemsClient);
   readonly #languageService = inject(LanguageService);
 
-  @Input() item?: ItemParent;
-  @Output() selected = new EventEmitter<string>();
+  readonly item = input.required<ItemParent>();
+  readonly selected = output<string>();
 
   protected open = false;
   protected loading = false;
   protected childs: ItemParent[] = [];
 
   private loadChildCatalogues() {
     this.loading = true;
-    if (this.item) {
+    if (this.item()) {
       this.#itemsClient
         .getItemParents(
           new ItemParentsRequest({
@@ -49,7 +49,7 @@ export class CarsSelectEngineTreeItemComponent {
               item: new ItemListOptions({
                 typeId: ItemType.ITEM_TYPE_ENGINE,
               }),
-              parentId: this.item.itemId,
+              parentId: this.item().itemId,
             }),
             order: ItemParentsRequest.Order.AUTO,
           }),

src/app/cars/specifications-editor/result/result.component.ts

@@ -1,10 +1,11 @@
 import {AsyncPipe} from '@angular/common';
-import {Component, inject, Input} from '@angular/core';
+import {Component, inject, input} from '@angular/core';
+import {toObservable} from '@angular/core/rxjs-interop';
 import {DomSanitizer} from '@angular/platform-browser';
 import {APIItem, GetSpecificationsRequest} from '@grpc/spec.pb';
 import {AttrsClient} from '@grpc/spec.pbsc';
 import {LanguageService} from '@services/language';
-import {BehaviorSubject, EMPTY} from 'rxjs';
+import {EMPTY} from 'rxjs';
 import {map, switchMap} from 'rxjs/operators';
 
 @Component({
@@ -17,12 +18,9 @@ export class CarsSpecificationsEditorResultComponent {
   readonly #sanitizer = inject(DomSanitizer);
   readonly #languageService = inject(LanguageService);
 
-  @Input() set item(item: APIItem) {
-    this.#item$.next(item);
-  }
-  readonly #item$ = new BehaviorSubject<APIItem | null>(null);
+  readonly item = input.required<APIItem>();
 
-  protected readonly html$ = this.#item$.pipe(
+  protected readonly html$ = toObservable(this.item).pipe(
     switchMap((item) =>
       item
         ? this.#attrsClient.getSpecifications(

src/app/cars/specifications-editor/spec/spec.component.ts

@@ -1,5 +1,6 @@
 import {AsyncPipe, DatePipe, NgStyle} from '@angular/common';
-import {Component, inject, Input} from '@angular/core';
+import {Component, inject, input} from '@angular/core';
+import {toObservable} from '@angular/core/rxjs-interop';
 import {FormArray, FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {
   APIItem,
@@ -96,10 +97,8 @@ export class CarsSpecificationsEditorSpecComponent {
   readonly #attrsClient = inject(AttrsClient);
   readonly #languageService = inject(LanguageService);
 
-  @Input() set item(item: APIItem) {
-    this.item$.next(item);
-  }
-  protected readonly item$ = new BehaviorSubject<APIItem | null>(null);
+  readonly item = input.required<APIItem>();
+  readonly item$ = toObservable(this.item);
 
   protected loading = 0;
   readonly #change$ = new BehaviorSubject<void>(void 0);

src/app/catalogue/item-menu/item-menu.component.html

@@ -1,42 +1,42 @@
 <ul class="nav nav-pills mb-4">
-  @if (childsCounts) {
+  @if (childsCounts(); as childsCounts) {
     @if (childsCounts.stock > 0) {
       <li class="nav-item">
-        <a class="nav-link" [class.active]="active === 'default'" [routerLink]="itemRouterLink">
+        <a class="nav-link" [class.active]="active() === 'default'" [routerLink]="itemRouterLink()">
           <i class="bi bi-list" aria-hidden="true"></i>
-          <app-item-header [item]="{nameHTML: header?.nameHTML || ''}"></app-item-header>
+          <app-item-header [item]="{nameHTML: header()?.nameHTML || ''}"></app-item-header>
           <span class="badge rounded-pill text-bg-secondary">{{ childsCounts.stock }}</span>
         </a>
       </li>
     }
     @if (childsCounts.tuning > 0) {
       <li class="nav-item">
-        <a class="nav-link" [class.active]="active === 'tuning'" [routerLink]="itemRouterLink.concat(['tuning'])">
+        <a class="nav-link" [class.active]="active() === 'tuning'" [routerLink]="itemRouterLink().concat(['tuning'])">
           <i class="bi bi-list" aria-hidden="true"></i>
           <ng-container i18n>Related</ng-container>
-          <app-item-header [item]="{nameHTML: header?.nameHTML || ''}"></app-item-header>
+          <app-item-header [item]="{nameHTML: header()?.nameHTML || ''}"></app-item-header>
           <span class="badge rounded-pill text-bg-secondary">{{ childsCounts.tuning }}</span>
         </a>
       </li>
     }
     @if (childsCounts.sport > 0) {
       <li class="nav-item">
-        <a class="nav-link" [class.active]="active === 'sport'" [routerLink]="itemRouterLink.concat(['sport'])">
+        <a class="nav-link" [class.active]="active() === 'sport'" [routerLink]="itemRouterLink().concat(['sport'])">
           <i class="bi bi-list" aria-hidden="true"></i>
-          <app-item-header [item]="{nameHTML: header?.nameHTML || ''}"></app-item-header>
+          <app-item-header [item]="{nameHTML: header()?.nameHTML || ''}"></app-item-header>
           <ng-container i18n>Sport</ng-container>
           <span class="badge rounded-pill text-bg-secondary">{{ childsCounts.sport }}</span>
         </a>
       </li>
     }
   }
-  @if (picturesCount > 0) {
+  @if (picturesCount() > 0) {
     <li class="nav-item">
-      <a class="nav-link" [class.active]="active === 'pictures'" [routerLink]="itemRouterLink.concat(['pictures'])">
+      <a class="nav-link" [class.active]="active() === 'pictures'" [routerLink]="itemRouterLink().concat(['pictures'])">
         <i class="bi bi-grid-3x2-gap-fill" aria-hidden="true"></i>
         <ng-container i18n>All pictures of</ng-container>
-        <app-item-header [item]="{nameHTML: header?.nameHTML || ''}"></app-item-header>
-        <span class="badge rounded-pill text-bg-secondary">{{ picturesCount }}</span>
+        <app-item-header [item]="{nameHTML: header()?.nameHTML || ''}"></app-item-header>
+        <span class="badge rounded-pill text-bg-secondary">{{ picturesCount() }}</span>
       </a>
     </li>
   }

src/app/catalogue/item-menu/item-menu.component.ts

@@ -1,7 +1,7 @@
 import type {APIItemChildsCounts} from '@services/item';
 import type {ItemHeader} from '@utils/item-header/item-header.component';
 
-import {Component, Input} from '@angular/core';
+import {Component, input} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {ItemHeaderComponent} from '@utils/item-header/item-header.component';
 
@@ -11,9 +11,9 @@ import {ItemHeaderComponent} from '@utils/item-header/item-header.component';
   templateUrl: './item-menu.component.html',
 })
 export class CatalogueItemMenuComponent {
-  @Input() itemRouterLink: string[] = [];
-  @Input() header?: ItemHeader;
-  @Input() childsCounts?: APIItemChildsCounts;
-  @Input() picturesCount = 0;
-  @Input() active = 'default';
+  readonly itemRouterLink = input.required<string[]>();
+  readonly header = input.required<ItemHeader>();
+  readonly childsCounts = input<APIItemChildsCounts | undefined>(undefined);
+  readonly picturesCount = input.required<number>();
+  readonly active = input.required<string>();
 }