Chorehancement: update to Angular v22, 'zoneless' / 'reactive' (#13114)

src-ui/src/app/components/common/toasts/toasts.component.html

@@ -1,3 +1,3 @@
-@for (toast of toasts; track toast.id) {
+@for (toast of toasts(); track toast.id) {
   <pngx-toast [toast]="toast" [autohide]="true" (closed)="closeToast()"></pngx-toast>
 }

src-ui/src/app/components/common/toasts/toasts.component.spec.ts

@@ -22,7 +22,7 @@ describe('ToastsComponent', () => {
   let component: ToastsComponent
   let fixture: ComponentFixture<ToastsComponent>
   let toastService: ToastService
-  let toastSubject: Subject<Toast> = new Subject()
+  let toastSubject: Subject<Toast>
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -33,10 +33,11 @@ describe('ToastsComponent', () => {
       ],
     }).compileComponents()
 
-    fixture = TestBed.createComponent(ToastsComponent)
     toastService = TestBed.inject(ToastService)
+    toastSubject = new Subject()
     jest.replaceProperty(toastService, 'showToast', toastSubject)
 
+    fixture = TestBed.createComponent(ToastsComponent)
     component = fixture.componentInstance
 
     fixture.detectChanges()
@@ -47,25 +48,15 @@ describe('ToastsComponent', () => {
   })
 
   it('should close toast', () => {
-    component.toasts = [toast]
+    toastSubject.next(toast)
     const closeToastSpy = jest.spyOn(toastService, 'closeToast')
     component.closeToast()
-    expect(component.toasts).toEqual([])
+    expect(component.toasts()).toEqual([])
     expect(closeToastSpy).toHaveBeenCalledWith(toast)
   })
 
-  it('should unsubscribe', () => {
-    const unsubscribeSpy = jest.spyOn(
-      (component as any).subscription,
-      'unsubscribe'
-    )
-    component.ngOnDestroy()
-    expect(unsubscribeSpy).toHaveBeenCalled()
-  })
-
-  it('should subscribe to toastService', () => {
-    component.ngOnInit()
+  it('should update from toastService', () => {
     toastSubject.next(toast)
-    expect(component.toasts).toEqual([toast])
+    expect(component.toasts()).toEqual([toast])
   })
 })

src-ui/src/app/components/common/toasts/toasts.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import { Component, inject } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import {
   NgbAccordionModule,
   NgbProgressbarModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { Subscription } from 'rxjs'
+import { map, merge, Subject } from 'rxjs'
 import { Toast, ToastService } from 'src/app/services/toast.service'
 import { ToastComponent } from '../toast/toast.component'
 
@@ -19,25 +20,21 @@ import { ToastComponent } from '../toast/toast.component'
     NgxBootstrapIconsModule,
   ],
 })
-export class ToastsComponent implements OnInit, OnDestroy {
+export class ToastsComponent {
   toastService = inject(ToastService)
 
-  private subscription: Subscription
+  private readonly closedToast = new Subject<void>()
 
-  public toasts: Toast[] = [] // array to force change detection
-
-  ngOnDestroy(): void {
-    this.subscription?.unsubscribe()
-  }
-
-  ngOnInit(): void {
-    this.subscription = this.toastService.showToast.subscribe((toast) => {
-      this.toasts = toast ? [toast] : []
-    })
-  }
+  readonly toasts = toSignal(
+    merge(
+      this.toastService.showToast.pipe(map((toast) => (toast ? [toast] : []))),
+      this.closedToast.pipe(map(() => [] as Toast[]))
+    ),
+    { initialValue: [] as Toast[] }
+  )
 
   closeToast() {
-    this.toastService.closeToast(this.toasts[0])
-    this.toasts = []
+    this.toastService.closeToast(this.toasts()[0])
+    this.closedToast.next()
   }
 }