switch to signals

Author: artlowel

src/app/thumbnail/thumbnail.component.html

@@ -1,5 +1,5 @@
 <div class="thumbnail" [class.limit-width]="limitWidth">
-  @if (isLoading$ | async) {
+  @if (isLoading()) {
     <div class="thumbnail-content outer">
       <div class="inner">
         <div class="centered">
@@ -9,11 +9,14 @@
     </div>
   }
   <!-- don't use *ngIf="!isLoading" so the thumbnail can load in while the animation is playing -->
-  @if ((src$ | async) !== null) {
-    <img class="thumbnail-content img-fluid" [ngClass]="{'d-none': (isLoading$ | async)}"
-      [src]="(src$ | async) | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()" (load)="successHandler()">
+  @if (src() !== null) {
+    <img class="thumbnail-content img-fluid" [ngClass]="{'d-none': isLoading()}"
+         [src]="src() | dsSafeUrl"
+         [alt]="alt | translate"
+         (error)="errorHandler()"
+         (load)="successHandler()">
   }
-  @if ((src$ | async) === null && (isLoading$ | async) === false) {
+  @if (src() === null && isLoading() === false) {
     <div class="thumbnail-content outer">
       <div class="inner">
         <div class="thumbnail-placeholder centered lead">

src/app/thumbnail/thumbnail.component.spec.ts

@@ -99,32 +99,32 @@ describe('ThumbnailComponent', () => {
     });
 
     describe('loading', () => {
-      it('should start out with isLoading$ true', () => {
-        expect(comp.isLoading$.getValue()).toBeTrue();
+      it('should start out with isLoading true', () => {
+        expect(comp.isLoading()).toBeTrue();
       });
 
       it('should set isLoading$ to false once an image is successfully loaded', () => {
         comp.setSrc('http://bit.stream');
         fixture.debugElement.query(By.css('img.thumbnail-content')).triggerEventHandler('load', new Event('load'));
-        expect(comp.isLoading$.getValue()).toBeFalse();
+        expect(comp.isLoading()).toBeFalse();
       });
 
       it('should set isLoading$ to false once the src is set to null', () => {
         comp.setSrc(null);
-        expect(comp.isLoading$.getValue()).toBeFalse();
+        expect(comp.isLoading()).toBeFalse();
       });
 
       it('should show a loading animation while isLoading$ is true', () => {
         expect(de.query(By.css('ds-loading'))).toBeTruthy();
 
-        comp.isLoading$.next(false);
+        comp.isLoading.set(false);
         fixture.detectChanges();
         expect(fixture.debugElement.query(By.css('ds-loading'))).toBeFalsy();
       });
 
       describe('with a thumbnail image', () => {
         beforeEach(() => {
-          comp.src$.next('https://bit.stream');
+          comp.src.set('https://bit.stream');
           fixture.detectChanges();
         });
 
@@ -133,7 +133,7 @@ describe('ThumbnailComponent', () => {
           expect(img).toBeTruthy();
           expect(img.classes['d-none']).toBeTrue();
 
-          comp.isLoading$.next(false);
+          comp.isLoading.set(false);
           fixture.detectChanges();
           img = fixture.debugElement.query(By.css('img.thumbnail-content'));
           expect(img).toBeTruthy();
@@ -144,14 +144,14 @@ describe('ThumbnailComponent', () => {
 
       describe('without a thumbnail image', () => {
         beforeEach(() => {
-          comp.src$.next(null);
+          comp.src.set(null);
           fixture.detectChanges();
         });
 
         it('should only show the HTML placeholder once done loading', () => {
           expect(fixture.debugElement.query(By.css('div.thumbnail-placeholder'))).toBeFalsy();
 
-          comp.isLoading$.next(false);
+          comp.isLoading.set(false);
           fixture.detectChanges();
           expect(fixture.debugElement.query(By.css('div.thumbnail-placeholder'))).toBeTruthy();
         });
@@ -247,14 +247,14 @@ describe('ThumbnailComponent', () => {
     describe('fallback', () => {
       describe('if there is a default image', () => {
         it('should display the default image', () => {
-          comp.src$.next('http://bit.stream');
+          comp.src.set('http://bit.stream');
           comp.defaultImage = 'http://default.img';
           comp.errorHandler();
-          expect(comp.src$.getValue()).toBe(comp.defaultImage);
+          expect(comp.src()).toBe(comp.defaultImage);
         });
 
         it('should include the alt text', () => {
-          comp.src$.next('http://bit.stream');
+          comp.src.set('http://bit.stream');
           comp.defaultImage = 'http://default.img';
           comp.errorHandler();
 
@@ -266,10 +266,10 @@ describe('ThumbnailComponent', () => {
 
       describe('if there is no default image', () => {
         it('should display the HTML placeholder', () => {
-          comp.src$.next('http://default.img');
+          comp.src.set('http://default.img');
           comp.defaultImage = null;
           comp.errorHandler();
-          expect(comp.src$.getValue()).toBe(null);
+          expect(comp.src()).toBe(null);
 
           fixture.detectChanges();
           const placeholder = fixture.debugElement.query(By.css('div.thumbnail-placeholder')).nativeElement;
@@ -363,7 +363,7 @@ describe('ThumbnailComponent', () => {
         it('should show the default image', () => {
           comp.defaultImage = 'default/image.jpg';
           comp.ngOnChanges({});
-          expect(comp.src$.getValue()).toBe('default/image.jpg');
+          expect(comp.src()).toBe('default/image.jpg');
         });
       });
     });
@@ -419,7 +419,7 @@ describe('ThumbnailComponent', () => {
     });
 
     it('should start out with isLoading$ true', () => {
-      expect(comp.isLoading$.getValue()).toBeTrue();
+      expect(comp.isLoading()).toBeTrue();
       expect(de.query(By.css('ds-loading'))).toBeTruthy();
     });
 

src/app/thumbnail/thumbnail.component.ts

@@ -8,10 +8,12 @@ import {
   Input,
   OnChanges,
   PLATFORM_ID,
+  signal,
   SimpleChanges,
+  WritableSignal,
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { of as observableOf, BehaviorSubject } from 'rxjs';
+import { of as observableOf } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 
 import { AuthService } from '../core/auth/auth.service';
@@ -54,7 +56,7 @@ export class ThumbnailComponent implements OnChanges {
   /**
    * The src attribute used in the template to render the image.
    */
-  src$: BehaviorSubject<string> = new BehaviorSubject<string>(undefined);
+  src: WritableSignal<string> = signal(undefined);
 
   retriedWithToken = false;
 
@@ -77,7 +79,7 @@ export class ThumbnailComponent implements OnChanges {
    * Whether the thumbnail is currently loading
    * Start out as true to avoid flashing the alt text while a thumbnail is being loaded.
    */
-  isLoading$: BehaviorSubject<boolean> = new BehaviorSubject(true);
+  isLoading: WritableSignal<boolean> = signal(true);
 
   constructor(
     @Inject(PLATFORM_ID) private platformID: any,
@@ -96,8 +98,8 @@ export class ThumbnailComponent implements OnChanges {
       // every time the inputs change we need to start the loading animation again, as it's possible
       // that thumbnail is first set to null when the parent component initializes and then set to
       // the actual value
-      if (this.isLoading$.getValue() === false) {
-        this.isLoading$.next(true);
+      if (!this.isLoading()) {
+        this.isLoading.set(true);
       }
 
       if (hasNoValue(this.thumbnail)) {
@@ -140,7 +142,7 @@ export class ThumbnailComponent implements OnChanges {
    * Otherwise, fall back to the default image or a HTML placeholder
    */
   errorHandler() {
-    const src = this.src$.getValue();
+    const src = this.src();
     const thumbnail = this.bitstream;
     const thumbnailSrc = thumbnail?._links?.content?.href;
 
@@ -192,16 +194,16 @@ export class ThumbnailComponent implements OnChanges {
    * @param src
    */
   setSrc(src: string): void {
-    this.src$.next(src);
+    this.src.set(src);
     if (src === null) {
-      this.isLoading$.next(false);
+      this.isLoading.set(false);
     }
   }
 
   /**
    * Stop the loading animation once the thumbnail is successfully loaded
    */
   successHandler() {
-    this.isLoading$.next(false);
+    this.isLoading.set(false);
   }
 }