fix: Drop model() in favor of input().

Author: mpalourdio

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## v17.2.0
+- Drop `model()` in favor of `input()` where possible.
+
 ## v17.1.0
 - Drop `@Input` in favor of `signals`.
 

src/lib/components/abstract.loader.directive.ts

@@ -7,10 +7,10 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Directive, model } from '@angular/core';
+import { Directive, input } from '@angular/core';
 
 @Directive()
 export abstract class AbstractLoaderDirective {
 
-    readonly backgroundColor = model<string>();
+    readonly backgroundColor = input<string>();
 }

src/lib/components/ng-http-loader.component.ts

@@ -7,13 +7,13 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Component, model, OnInit, Type } from '@angular/core';
+import { AsyncPipe, NgComponentOutlet, NgIf, NgStyle } from '@angular/common';
+import { Component, input, model, OnInit, Type } from '@angular/core';
 import { merge, Observable, partition, timer } from 'rxjs';
 import { debounce, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';
+import { PendingRequestsInterceptorConfigurer } from '../services/pending-requests-interceptor-configurer.service';
 import { SpinnerVisibilityService } from '../services/spinner-visibility.service';
 import { Spinkit, SPINKIT_COMPONENTS } from '../spinkits';
-import { AsyncPipe, NgComponentOutlet, NgIf, NgStyle } from "@angular/common";
-import { PendingRequestsInterceptorConfigurer } from "../services/pending-requests-interceptor-configurer.service";
 
 @Component({
     selector: 'ng-http-loader',
@@ -28,17 +28,17 @@ export class NgHttpLoaderComponent implements OnInit {
     isVisible$!: Observable<boolean>;
     visibleUntil = Date.now();
 
-    readonly backdrop = model<boolean>(true);
-    readonly backgroundColor = model<string>();
-    readonly debounceDelay = model<number>(0);
-    readonly entryComponent = model<Type<unknown> | null>(null);
-    readonly extraDuration = model<number>(0);
-    readonly filteredHeaders = model<string[]>([]);
-    readonly filteredMethods = model<string[]>([]);
-    readonly filteredUrlPatterns = model<string[]>([]);
-    readonly minDuration = model<number>(0);
-    readonly opacity = model<string>('.7');
-    readonly backdropBackgroundColor = model<string>('#f1f1f1');
+    readonly backdrop = input<boolean>(true);
+    readonly backgroundColor = input<string>();
+    readonly debounceDelay = input<number>(0);
+    readonly entryComponent = input<Type<unknown> | null>(null);
+    readonly extraDuration = input<number>(0);
+    readonly filteredHeaders = input<string[]>([]);
+    readonly filteredMethods = input<string[]>([]);
+    readonly filteredUrlPatterns = input<string[]>([]);
+    readonly minDuration = input<number>(0);
+    readonly opacity = input<string>('.7');
+    readonly backdropBackgroundColor = input<string>('#f1f1f1');
     readonly spinner = model<string | null>(Spinkit.skWave);
 
     constructor(private pendingRequestsInterceptorConfigurer: PendingRequestsInterceptorConfigurer, private spinnerVisibility: SpinnerVisibilityService) {
@@ -67,7 +67,7 @@ export class NgHttpLoaderComponent implements OnInit {
 
     private nullifySpinnerIfEntryComponentIsDefined(): void {
         if (this.entryComponent()) {
-            this.spinner.set(null);
+            this.spinner.update(() => null);
         }
     }
 

src/test/components/ng-http-loader.component.on-push.spec.ts

@@ -12,8 +12,8 @@ import { HttpTestingController, provideHttpClientTesting } from '@angular/common
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { NgHttpLoaderComponent } from "../../lib/components/ng-http-loader.component";
-import { pendingRequestsInterceptor$ } from "../../lib/services/pending-requests-interceptor";
+import { NgHttpLoaderComponent } from '../../lib/components/ng-http-loader.component';
+import { pendingRequestsInterceptor$ } from '../../lib/services/pending-requests-interceptor';
 
 @Component({
     standalone: true,

src/test/components/ng-http-loader.component.outlet.spec.ts

@@ -32,7 +32,7 @@ describe('NgHttpLoaderComponentOutlet', () => {
 
     it('should be possible to specify an entryComponent', () => {
         component.isVisible$ = of(true);
-        component.entryComponent.set(SkThreeBounceComponent);
+        fixture.componentRef.setInput('entryComponent', SkThreeBounceComponent);
         fixture.detectChanges();
 
         const element = fixture
@@ -45,7 +45,7 @@ describe('NgHttpLoaderComponentOutlet', () => {
 
     it('should force [spinner] to null if [entryComponent] is defined', () => {
         component.spinner.set('spinner-name');
-        component.entryComponent.set(SkThreeBounceComponent);
+        fixture.componentRef.setInput('entryComponent', SkThreeBounceComponent);
         component.ngOnInit();
 
         expect(component.spinner()).toBeNull();
@@ -54,7 +54,7 @@ describe('NgHttpLoaderComponentOutlet', () => {
     it('should correctly check [entryComponent] with null', () => {
         const spinnerName = 'spinner-name';
         component.spinner.set(spinnerName);
-        component.entryComponent.set(null);
+        fixture.componentRef.setInput('entryComponent', null);
         component.ngOnInit();
 
         expect(component.spinner()).toBe(spinnerName);

src/test/components/ng-http-loader.component.spec.ts

@@ -13,9 +13,9 @@ import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angul
 import { By } from '@angular/platform-browser';
 import { forkJoin, Observable, of, Subscription } from 'rxjs';
 import { NgHttpLoaderComponent } from '../../lib/components/ng-http-loader.component';
+import { pendingRequestsInterceptor$ } from '../../lib/services/pending-requests-interceptor';
 import { SpinnerVisibilityService } from '../../lib/services/spinner-visibility.service';
 import { Spinkit } from '../../lib/spinkits';
-import { pendingRequestsInterceptor$ } from "../../lib/services/pending-requests-interceptor";
 
 describe('NgHttpLoaderComponent', () => {
     let component: NgHttpLoaderComponent;
@@ -67,7 +67,7 @@ describe('NgHttpLoaderComponent', () => {
 
     it('should not set the colored class if background-color is defined', () => {
         component.isVisible$ = of(true);
-        component.backgroundColor.set('#ff0000');
+        fixture.componentRef.setInput('backgroundColor', '#ff0000');
         fixture.detectChanges();
 
         const element = fixture
@@ -101,7 +101,7 @@ describe('NgHttpLoaderComponent', () => {
 
     it('should allow us to specify a custom background-color', () => {
         component.isVisible$ = of(true);
-        component.backgroundColor.set('#ff0000');
+        fixture.componentRef.setInput('backgroundColor', '#ff0000');
         fixture.detectChanges();
 
         const element = fixture
@@ -271,7 +271,7 @@ describe('NgHttpLoaderComponent', () => {
     }));
 
     it('should correctly handle the debounce delay for a single HTTP request', fakeAsync(() => {
-        component.debounceDelay.set(2000);
+        fixture.componentRef.setInput('debounceDelay', 2000);
         http.get('/fake').subscribe();
 
         // the HTTP request is pending for 1 second now
@@ -297,7 +297,7 @@ describe('NgHttpLoaderComponent', () => {
     }));
 
     it('should correctly handle the debounce delay for HTTP request finished before spinner should be shown', fakeAsync(() => {
-        component.debounceDelay.set(2000);
+        fixture.componentRef.setInput('debounceDelay', 2000);
         http.get('/fake').subscribe();
 
         // the HTTP request is pending for 1 second now
@@ -311,7 +311,7 @@ describe('NgHttpLoaderComponent', () => {
     }));
 
     it('should correctly handle the debounce delay for HTTP sequential requests finished before spinner should be shown', fakeAsync(() => {
-        component.debounceDelay.set(5000);
+        fixture.componentRef.setInput('debounceDelay', 5000);
         http.get('/fake').subscribe();
 
         // the first HTTP request is pending for 1 second now
@@ -339,7 +339,7 @@ describe('NgHttpLoaderComponent', () => {
     }));
 
     it('should correctly handle the debounce delay for HTTP parallel requests finished before spinner should be shown', fakeAsync(() => {
-        component.debounceDelay.set(5000);
+        fixture.componentRef.setInput('debounceDelay', 5000);
         http.get('/fake').subscribe();
         http.get('/fake2').subscribe();
 
@@ -365,7 +365,7 @@ describe('NgHttpLoaderComponent', () => {
     }));
 
     it('should correctly handle the debounce delay for multiple HTTP requests', fakeAsync(() => {
-        component.debounceDelay.set(2000);
+        fixture.componentRef.setInput('debounceDelay', 2000);
         const runQuery$ = (url: string): Observable<unknown> => http.get(url);
         forkJoin([runQuery$('/fake'), runQuery$('/fake2')]).subscribe();
         const firstRequest = httpMock.expectOne('/fake');
@@ -448,7 +448,7 @@ describe('NgHttpLoaderComponent', () => {
     }));
 
     it('should correctly handle the minimum spinner duration for a single HTTP request', fakeAsync(() => {
-        component.minDuration.set(5000);
+        fixture.componentRef.setInput('minDuration', 5000);
         http.get('/fake').subscribe();
 
         // the HTTP request is pending for 1 second now
@@ -482,7 +482,7 @@ describe('NgHttpLoaderComponent', () => {
     }));
 
     it('should correctly handle the extra spinner duration for a single HTTP request', fakeAsync(() => {
-        component.extraDuration.set(5000);
+        fixture.componentRef.setInput('extraDuration', 5000);
         http.get('/fake').subscribe();
 
         // the HTTP request is pending for 1 second now
@@ -508,7 +508,7 @@ describe('NgHttpLoaderComponent', () => {
     }));
 
     it('should correctly handle the minimum spinner duration for multiple HTTP requests', fakeAsync(() => {
-        component.minDuration.set(5000);
+        fixture.componentRef.setInput('minDuration', 5000);
         const runQuery$ = (url: string): Observable<unknown> => http.get(url);
         forkJoin([runQuery$('/fake'), runQuery$('/fake2')]).subscribe();
         const firstRequest = httpMock.expectOne('/fake');
@@ -546,7 +546,7 @@ describe('NgHttpLoaderComponent', () => {
     }));
 
     it('should correctly handle the extra spinner duration for multiple HTTP requests', fakeAsync(() => {
-        component.extraDuration.set(5000);
+        fixture.componentRef.setInput('extraDuration', 5000);
         const runQuery$ = (url: string): Observable<unknown> => http.get(url);
         forkJoin([runQuery$('/fake'), runQuery$('/fake2')]).subscribe();
         const firstRequest = httpMock.expectOne('/fake');
@@ -588,7 +588,7 @@ describe('NgHttpLoaderComponent', () => {
     }));
 
     it('should correctly handle the minimum spinner duration for multiple HTTP requests ran one after the others', fakeAsync(() => {
-        component.minDuration.set(2000);
+        fixture.componentRef.setInput('minDuration', 2000);
         http.get('/fake').subscribe();
         const firstRequest = httpMock.expectOne('/fake');
 
@@ -620,7 +620,7 @@ describe('NgHttpLoaderComponent', () => {
     }));
 
     it('should handle the extra spinner duration for multiple HTTP requests ran one after the others', fakeAsync(() => {
-        component.extraDuration.set(10);
+        fixture.componentRef.setInput('extraDuration', 10);
         const runQuery$ = (url: string): Observable<unknown> => http.get(url);
         runQuery$('/fake').subscribe();
         const firstRequest = httpMock.expectOne('/fake');
@@ -648,7 +648,7 @@ describe('NgHttpLoaderComponent', () => {
     }));
 
     it('should still display the spinner when the minimum duration is inferior to the HTTP request duration', fakeAsync(() => {
-        component.minDuration.set(1000);
+        fixture.componentRef.setInput('minDuration', 1000);
         http.get('/fake').subscribe();
 
         // the HTTP request is pending for 1 second now
@@ -666,7 +666,7 @@ describe('NgHttpLoaderComponent', () => {
     }));
 
     it('should be possible to set the minimum duration without side effect on manual show/hide', () => {
-        component.minDuration.set(10000);
+        fixture.componentRef.setInput('minDuration', 10000);
         spinner.show();
         expect(isVisible).toBeTruthy();
 
@@ -675,7 +675,7 @@ describe('NgHttpLoaderComponent', () => {
     });
 
     it('should be possible to set the extra duration without side effect on manual show/hide', () => {
-        component.extraDuration.set(10000);
+        fixture.componentRef.setInput('extraDuration', 10000);
         spinner.show();
         expect(isVisible).toBeTruthy();
 
@@ -685,8 +685,8 @@ describe('NgHttpLoaderComponent', () => {
 
     it('should be possible to mix debounce delay and minimum duration', fakeAsync(() => {
         // the spinner should not be visible the first second, then visible for 5 seconds
-        component.minDuration.set(5000);
-        component.debounceDelay.set(1000);
+        fixture.componentRef.setInput('minDuration', 5000);
+        fixture.componentRef.setInput('debounceDelay', 1000);
 
         http.get('/fake').subscribe();
 
@@ -718,8 +718,8 @@ describe('NgHttpLoaderComponent', () => {
 
     it('should be possible to mix debounce delay and extra duration', fakeAsync(() => {
         // the spinner should not be visible the first second, then visible for 5 seconds
-        component.extraDuration.set(5000);
-        component.debounceDelay.set(1000);
+        fixture.componentRef.setInput('extraDuration', 5000);
+        fixture.componentRef.setInput('debounceDelay', 1000);
 
         http.get('/fake').subscribe();
 
@@ -763,7 +763,7 @@ describe('NgHttpLoaderComponent', () => {
 
     it('should be possible to remove the backdrop CSS class', () => {
         component.isVisible$ = of(true);
-        component.backdrop.set(false);
+        fixture.componentRef.setInput('backdrop', false);
         fixture.detectChanges();
 
         const element = fixture
@@ -787,7 +787,7 @@ describe('NgHttpLoaderComponent', () => {
 
     it('should be possible to override opacity', () => {
         component.isVisible$ = of(true);
-        component.opacity.set('.3');
+        fixture.componentRef.setInput('opacity', '.3');
         fixture.detectChanges();
 
         const element: HTMLElement = fixture
@@ -812,7 +812,7 @@ describe('NgHttpLoaderComponent', () => {
 
     it('should be possible to override backdrop background color when backdrop is true', () => {
         component.isVisible$ = of(true);
-        component.backdropBackgroundColor.set('#777777');
+        fixture.componentRef.setInput('backdropBackgroundColor', '#777777');
         fixture.detectChanges();
 
         const element: HTMLElement = fixture
@@ -825,7 +825,7 @@ describe('NgHttpLoaderComponent', () => {
 
     it('should not have a transparent backdrop background color if backdrop is false', () => {
         component.isVisible$ = of(true);
-        component.backdrop.set(false);
+        fixture.componentRef.setInput('backdrop', false);
         fixture.detectChanges();
 
         const element: HTMLElement = fixture

src/test/components/sk-chasing-dots/sk-chasing-dots.component.spec.ts

@@ -32,7 +32,7 @@ describe('SkChasingDotsComponent', () => {
     });
 
     it('should be possible to set background-color', () => {
-        component.backgroundColor.set('#ff0000');
+        fixture.componentRef.setInput('backgroundColor', '#ff0000');
         fixture.detectChanges();
 
         const element = fixture

src/test/components/sk-cube-grid/sk-cube-grid.component.spec.ts

@@ -32,7 +32,7 @@ describe('SkCubeGridComponent', () => {
     });
 
     it('should be possible to set background-color', () => {
-        component.backgroundColor.set('#ff0000');
+        fixture.componentRef.setInput('backgroundColor', '#ff0000');
         fixture.detectChanges();
 
         const element = fixture

src/test/components/sk-double-bounce/sk-double-bounce.component.spec.ts

@@ -32,7 +32,7 @@ describe('SkDoubleBounceComponent', () => {
     });
 
     it('should be possible to set background-color', () => {
-        component.backgroundColor.set('#ff0000');
+        fixture.componentRef.setInput('backgroundColor', '#ff0000');
         fixture.detectChanges();
 
         const element = fixture

src/test/components/sk-rotating-plane/sk-rotating-plane.component.spec.ts

@@ -32,7 +32,7 @@ describe('SkRotatingPlaneComponent', () => {
     });
 
     it('should be possible to set background-color', () => {
-        component.backgroundColor.set('#ff0000');
+        fixture.componentRef.setInput('backgroundColor', '#ff0000');
         fixture.detectChanges();
 
         const element = fixture