Adopt Angular signals for reactive state

docs/modernization-plan.md

@@ -142,7 +142,14 @@ Angular migrations must go one major version at a time:
   - Replaced `takeUntil(this.unsubscribe$)` with `takeUntilDestroyed(this.destroyRef)` in 40+ components
   - Removed `unsubscribe$` from 7 root services (singletons never destroy)
   - Deleted unused `StreamingChildComponent`
-- [ ] Adopt Angular signals where beneficial
+- [x] Adopt Angular signals where beneficial
+  - Converted `AppStateService` BehaviorSubjects to `WritableSignal` (disableAds, debugmode, favoritesList$, favoritesMap, hiddenMilestones, hiddenClanMilestones)
+  - Converted `ChildComponent.loading` to `signal<boolean>(false)`
+  - Converted service-level `loading` BehaviorSubjects to signals (StreamingService, GearService, ClanStateService, FriendStarComponent, PerkbenchComponent, DimSyncService, MarkService)
+  - Updated 54 templates: replaced `field | async` with `field()` signal reads
+  - Replaced `.next()` with `.set()` and `.getValue()` with `()` across 24 TS files
+  - Removed `AsyncPipe` import from 11 components that no longer use it
+  - Converted `FriendsComponent.members` to signal, used `effect()` for reactive state
 - [x] Evaluate esbuild-based builder (`@angular-devkit/build-angular:application`)
   - Switched from webpack `browser` builder to esbuild `application` builder
   - Replaced `require()` with ESM `import` for package.json in environment files

package.json

@@ -1,6 +1,6 @@
 {
   "name": "d2-checklist",
-  "version": "29.3.0",
+  "version": "29.4.0",
   "manifest": "242999.26.03.25.2000-1-bnet.64463",
   "license": "MIT",
   "scripts": {

src/app/auth/auth/auth.component.html

@@ -1,6 +1,6 @@
 
 <div class="center-spinner">
-  <mat-spinner class="loading" class="center-spinner" *ngIf="(loading|async)===true"></mat-spinner>
+  <mat-spinner class="loading" class="center-spinner" *ngIf="loading()===true"></mat-spinner>
 </div>
 <h1>{{statusMsg}}</h1>
 <ng-container *ngIf="errMsg!=null">

src/app/auth/auth/auth.component.ts

@@ -5,7 +5,7 @@ import { takeUntil } from 'rxjs/operators';
 import { AuthService } from '../../service/auth.service';
 import { ChildComponent } from '../../shared/child.component';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgIf, AsyncPipe } from '@angular/common';
+import { NgIf } from '@angular/common';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 
 
@@ -15,7 +15,7 @@ import { MatProgressSpinner } from '@angular/material/progress-spinner';
     templateUrl: './auth.component.html',
     styleUrls: ['./auth.component.scss'],
     standalone: true,
-    imports: [NgIf, MatProgressSpinner, AsyncPipe]
+    imports: [NgIf, MatProgressSpinner]
 })
 export class AuthComponent extends ChildComponent implements OnInit {
   statusMsg = 'Authorizing';

src/app/bungie-search/bungie-search/bungie-search.component.html

@@ -1,5 +1,5 @@
 <div class="center-spinner">
-  <mat-spinner class="loading" class="center-spinner" *ngIf="(loading|async)===true"></mat-spinner>
+  <mat-spinner class="loading" class="center-spinner" *ngIf="loading()===true"></mat-spinner>
 </div>
 <h1>Search Bungie</h1>
 <div class="note centerMe"><small>Wild-card search Bungie accounts by name. Note that sometimes these are

src/app/bungie-search/bungie-search/bungie-search.component.ts

@@ -40,13 +40,13 @@ export class BungieSearchComponent extends ChildComponent implements OnInit {
   }
 
   public async loadClan(member: BungieGlobalSearchResult) {
-    this.loading.next(true);
+    this.loading.set(true);
     try {
       const x = await this.bungieService.getClans(member.bungieNetMembershipId!);
       member.clans = x;
     }
     finally {
-      this.loading.next(false);
+      this.loading.set(false);
     }
     this.ref.markForCheck();
 
@@ -65,13 +65,13 @@ export class BungieSearchComponent extends ChildComponent implements OnInit {
 
   private async load() {
     console.log('loading');
-    this.loading.next(true);
+    this.loading.set(true);
     try {
       const x: BungieGlobalSearchResult[] = await this.bungieService.searchBungieUsers(this.name);
       this.rows$.next(x);
     }
     finally {
-      this.loading.next(false);
+      this.loading.set(false);
     }
   }
 

src/app/clan-search/clan-search/clan-search.component.html

@@ -1,5 +1,5 @@
 <div class="center-spinner">
-  <mat-spinner class="loading" class="center-spinner" *ngIf="(loading|async)===true"></mat-spinner>
+  <mat-spinner class="loading" class="center-spinner" *ngIf="loading()===true"></mat-spinner>
 </div>
 <h1><i class="icon-clan"></i> Clan Search</h1>
 <div class="note centerMe"><small>Clan names must match exactly.</small>

src/app/clan-search/clan-search/clan-search.component.ts

@@ -35,7 +35,7 @@ export class ClanSearchComponent extends ChildComponent implements OnInit {
   }
 
   private async load() {
-    this.loading.next(true);
+    this.loading.set(true);
     try {
       const x = await this.bungieService.searchClans(this.name);
       this.clan.next(x);
@@ -44,7 +44,7 @@ export class ClanSearchComponent extends ChildComponent implements OnInit {
       this.clan = null!;
     }
     finally {
-      this.loading.next(false);
+      this.loading.set(false);
     }
 
   }

src/app/clan/clan-collections/clan-badges/clan-badges.component.html

@@ -8,7 +8,7 @@
                 </div>
                 <div class="badge-info">
                     {{badge.data.name}}
-                    <ng-container *ngIf="debugmode|async"> {{badge.data.hash}}</ng-container>
+                    <ng-container *ngIf="debugmode()"> {{badge.data.hash}}</ng-container>
                     <div class="button-section">
                         <button mat-stroked-button (click)="openBadgeDialog(badge)">
                             {{badge.complete}} / {{badge.total}}

src/app/clan/clan-collections/clan-collection-item/clan-collection-item.component.html

@@ -4,7 +4,7 @@
             <div *ngIf="item.data.icon!=null" class="transparent-icon transparent-leaf-icon"
                 [style.background-image]="'url(//www.bungie.net' + item.data.icon + ')'"></div>
             {{item.data.name}}
-            <span class="simple-caption" *ngIf="debugmode|async">{{item.data.hash}}</span>
+            <span class="simple-caption" *ngIf="debugmode()">{{item.data.hash}}</span>
         </div>
         <div class="clan-child-spacer"></div>
         <div class="clan-child-details">

src/app/clan/clan-collections/clan-collection-item/clan-collection-item.component.ts

@@ -3,7 +3,7 @@ import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { ClanSearchableCollection, ClanStateService } from '@app/clan/clan-state.service';
 import { ChildComponent } from '@app/shared/child.component';
 import { ClanCollectionItemDialogComponent } from '../clan-collection-item-dialog/clan-collection-item-dialog.component';
-import { NgIf, AsyncPipe } from '@angular/common';
+import { NgIf } from '@angular/common';
 import { MatButton } from '@angular/material/button';
 import { MatProgressBar } from '@angular/material/progress-bar';
 
@@ -14,7 +14,7 @@ import { MatProgressBar } from '@angular/material/progress-bar';
     templateUrl: './clan-collection-item.component.html',
     styleUrls: ['./clan-collection-item.component.scss'],
     standalone: true,
-    imports: [NgIf, MatButton, MatProgressBar, AsyncPipe]
+    imports: [NgIf, MatButton, MatProgressBar]
 })
 export class ClanCollectionItemComponent extends ChildComponent {
 

src/app/clan/clan-lifetime/clan-lifetime.component.html

@@ -4,7 +4,7 @@
     </p>
     <mat-progress-bar mode="determinate" [value]="(state.aggHistoryLoaded|async)!*100"></mat-progress-bar>
     <div class="center-spinner">
-        <mat-spinner class="loading" class="center-spinner" *ngIf="(state.loading|async)===true">
+        <mat-spinner class="loading" class="center-spinner" *ngIf="(state.loading())===true">
         </mat-spinner>
     </div>
 </ng-container>

src/app/clan/clan-members/clan-members.component.html

@@ -14,7 +14,7 @@ <h4 *ngIf="(state.sortedMembers|async)!.length==0" class="left warn-text">
                     <a [routerLink]="['/',member.destinyUserInfo.membershipType, member.destinyUserInfo.membershipId]">
                         {{member.destinyUserInfo.displayName}} {{member.destinyUserInfo.platformName}}
                     </a>
-                    <d2c-friend-star [userInfo]="member.destinyUserInfo" [favoritesMap]="(favoritesMap|async)!"></d2c-friend-star>
+                    <d2c-friend-star [userInfo]="member.destinyUserInfo" [favoritesMap]="favoritesMap()!"></d2c-friend-star>
                     <span class="fake-link" style="margin-left:0.25em"
                         (click)="state.loadSpecificPlayer(member, true)">
                         &ensp;<fa-icon [icon]="iconService.fasSync"></fa-icon>

src/app/clan/clan-milestones/clan-milestones.component.html

@@ -1,11 +1,11 @@
 <ng-container *ngIf="state.modelPlayer|async as modelPlayer; else loadingModel">
 
     <div class="mobile-button-row">
-        <button mat-button (click)="showAllClanMilestones()" *ngIf="(hiddenClanMilestones|async)!.length>0">
+        <button mat-button (click)="showAllClanMilestones()" *ngIf="hiddenClanMilestones()!.length>0">
             <fa-icon [icon]="iconService.falEye"></fa-icon> All
         </button>
         <button mat-button (click)="showDefaultClanMilestones()"
-            *ngIf="(hiddenClanMilestones|async)!.length!=storageService.getDefaultHideClanMs().length">
+            *ngIf="hiddenClanMilestones()!.length!=storageService.getDefaultHideClanMs().length">
             <fa-icon [icon]="iconService.falEye"></fa-icon> Default
         </button>
     </div>
@@ -28,10 +28,10 @@
             <tr>
                 <ng-container *ngTemplateOutlet="sortHeader"></ng-container>
                 <ng-container *ngFor="let mileStoneName of modelPlayer.milestoneList">
-                    <th class="milestone-header" *ngIf="(hiddenClanMilestones|async)!.indexOf(mileStoneName.key)===-1">
+                    <th class="milestone-header" *ngIf="hiddenClanMilestones()!.indexOf(mileStoneName.key)===-1">
                         <span [matTooltip]="mileStoneName.desc"
                             matTooltipClass="preserve-white-space">{{mileStoneName.name}}</span>
-                        <span *ngIf="debugmode|async">  {{mileStoneName.key}}</span>
+                        <span *ngIf="debugmode()">  {{mileStoneName.key}}</span>
                         <span class="fake-link"
                             matTooltip="Hide this milestone, click Restore Hidden to restore it later"
                             class="milestoneVisibilityButton" (click)="hideClanMilestone(mileStoneName.key)">
@@ -48,7 +48,7 @@
                         {{member.destinyUserInfo.displayName}} {{member.destinyUserInfo.platformName}}
                     </a>
 
-                    <d2c-friend-star [userInfo]="member.destinyUserInfo" [favoritesMap]="(favoritesMap|async)!"></d2c-friend-star>
+                    <d2c-friend-star [userInfo]="member.destinyUserInfo" [favoritesMap]="favoritesMap()!"></d2c-friend-star>
                     <span class="fake-link" style="margin-left:0.25em"
                         (click)="state.loadSpecificPlayer(member, true)">
                         &ensp;<fa-icon [icon]="iconService.fasSync"></fa-icon>
@@ -70,7 +70,7 @@
 
                         <ng-container *ngFor="let mileStoneName of modelPlayer.milestoneList">
 
-                            <td *ngIf="(hiddenClanMilestones|async)!.indexOf(mileStoneName.key)===-1"
+                            <td *ngIf="hiddenClanMilestones()!.indexOf(mileStoneName.key)===-1"
                                 class="clan-player-ms-cell" [attr.data-label]="mileStoneName.name">
                                 <ng-container *ngFor="let char of player.characters">
                                     <d2c-milestone-check [milestone]="char.milestones[mileStoneName.key]">
@@ -83,7 +83,7 @@
                 </ng-container>
                 <ng-container *ngIf="(member.player$|async)==null && member.errorMsg==null && modelPlayer!=null">
                     <ng-container *ngFor="let mileStoneName of modelPlayer.milestoneList">
-                        <td *ngIf="(hiddenClanMilestones|async)!.indexOf(mileStoneName.key)===-1">...</td>
+                        <td *ngIf="hiddenClanMilestones()!.indexOf(mileStoneName.key)===-1">...</td>
                     </ng-container>
                 </ng-container>
                 <ng-container *ngIf="member.errorMsg!=null && modelPlayer!=null">
@@ -99,10 +99,10 @@
                 <ng-container *ngTemplateOutlet="sortHeader"></ng-container>
                 <ng-container *ngIf="modelPlayer!=null">
                     <ng-container *ngFor="let mileStoneName of modelPlayer.milestoneList">
-                        <th *ngIf="(hiddenClanMilestones|async)!.indexOf(mileStoneName.key)===-1">
+                        <th *ngIf="hiddenClanMilestones()!.indexOf(mileStoneName.key)===-1">
                             <span [matTooltip]="mileStoneName.desc"
                                 matTooltipClass="preserve-white-space">{{mileStoneName.name}}</span>
-                            <span *ngIf="debugmode|async">  {{mileStoneName.key}}</span>
+                            <span *ngIf="debugmode()">  {{mileStoneName.key}}</span>
                             <span class="fake-link"
                                 matTooltip="Hide this milestone, click Restore Hidden to restore it later"
                                 class="milestoneVisibilityButton" (click)="hideClanMilestone(mileStoneName.key)">
@@ -149,11 +149,11 @@ <h1>
         </span>
         <div class="d-none d-md-inline">
             <button class="d-none d-md-inline" mat-button (click)="showAllClanMilestones()"
-                *ngIf="(hiddenClanMilestones|async)!.length>0">
+                *ngIf="hiddenClanMilestones()!.length>0">
                 <fa-icon [icon]="iconService.falEye"></fa-icon> All
             </button>
             <button class="d-none d-md-inline" mat-button (click)="showDefaultClanMilestones()"
-                *ngIf="(hiddenClanMilestones|async)!.length!=storageService.getDefaultHideClanMs().length">
+                *ngIf="hiddenClanMilestones()!.length!=storageService.getDefaultHideClanMs().length">
                 <fa-icon [icon]="iconService.falEye"></fa-icon> Default
             </button>
         </div>

src/app/clan/clan-state.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, signal} from '@angular/core';
 import { Router } from '@angular/router';
 import { BungieService } from '@app/service/bungie.service';
 import { Sort } from '@app/service/model';
@@ -99,7 +99,7 @@ export interface ClanSearchableCollection extends ClanAggregate {
   providedIn: 'root'
 })
 export class ClanStateService {
-  public loading: BehaviorSubject<boolean> = new BehaviorSubject(false);
+  public loading = signal<boolean>(false);
   public notFound: BehaviorSubject<boolean> = new BehaviorSubject(false);
   public inactiveMembers: BungieGroupMember[] = [];
   public defunctMembers: BungieGroupMember[] = [];
@@ -705,7 +705,7 @@ export class ClanStateService {
     this.aggHistoryAllLoaded.next(false);
     this.aggHistory.next([]);
     this.notFound.next(false);
-    this.loading.next(true);
+    this.loading.set(true);
     this.members = [];
 
     this.defunctMembers = [];
@@ -753,7 +753,7 @@ export class ClanStateService {
       this.sortData();
       const operateOnMe = this.sortedMembers.getValue();
       console.log(`Active ${operateOnMe.length} / ${functMembers.length}`);
-      this.loading.next(false);
+      this.loading.set(false);
       for (const t of operateOnMe) {
         if (this.modelPlayer.getValue() == null) {
           await this.loadSpecificPlayer(t, false);
@@ -762,7 +762,7 @@ export class ClanStateService {
         }
       }
     } catch (x) {
-      this.loading.next(false);
+      this.loading.set(false);
     }
   }
 

src/app/clan/clan-triumphs/clan-seals/clan-seals.component.html

@@ -7,7 +7,7 @@
                         <div *ngIf="s.data.icon!=null" class="seal-icon"
                             [style.background-image]="'url(//www.bungie.net' + s.data.icon + ')'"></div>
                         {{s.data.title}}
-                        <ng-container *ngIf="debugmode|async">{{s.data.hash}}</ng-container>
+                        <ng-container *ngIf="debugmode()">{{s.data.hash}}</ng-container>
                     </mat-panel-title>
                     <mat-panel-description>
                         <button mat-stroked-button (click)="openSealDialog(s, $event)">

src/app/clan/clan.component.html

@@ -36,10 +36,10 @@ <h3 class="clan-name">
       <mat-tab-nav-panel #tabPanel>
         <div class="body clan-body">
           <div class="center-spinner">
-            <mat-spinner class="loading" class="center-spinner" *ngIf="(state.loading|async)===true">
+            <mat-spinner class="loading" class="center-spinner" *ngIf="(state.loading())===true">
             </mat-spinner>
           </div>
-          <router-outlet *ngIf="(state.loading|async) === false"></router-outlet>
+          <router-outlet *ngIf="(state.loading()) === false"></router-outlet>
         </div>
       </mat-tab-nav-panel>
     </div>   

src/app/deals/weapon-compare-dialog/weapon-compare-dialog.component.html

@@ -105,7 +105,7 @@ <h4 mat-dialog-title>{{title}}</h4>
             </th>
             <ng-container *ngFor="let i of sortedItems|async">
                 <td *ngIf="!hideJunk || i.mark!='junk'" [ngClass]="i.mark?i.mark:'none'">
-                    <d2c-god-roll-mw [item]="i" [debugmode]="(debugmode|async)!"></d2c-god-roll-mw>
+                    <d2c-god-roll-mw [item]="i" [debugmode]="debugmode()!"></d2c-god-roll-mw>
                 </td>
             </ng-container>
         </tr>