Update

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## 12.0.0
+## 12.0.1
 
 - Upgrade to Angular 18 (still compatible v17.3.0 and above).
 - feat: Introduce CSS variables for more flexible customization, see [styling](https://github.com/MurhafSousli/ngx-progressbar/wiki/styling).

projects/ngx-progressbar-demo/src/app/app.component.html

@@ -1,14 +1,14 @@
 <div class="container">
 
- <app-header></app-header>
+ <app-header/>
 
  <div class="menu">
  <a routerLink="/" routerLinkActive="active-link" [routerLinkActiveOptions]="{ exact: true }"> Basic </a> /
  <a routerLink="/custom" routerLinkActive="active-link"> Custom </a>
  </div>
 
  <div class="main">
- <router-outlet></router-outlet>
+ <router-outlet/>
  </div>
 </div>
 

projects/ngx-progressbar-demo/src/app/home/lab/lab.component.html

@@ -6,7 +6,9 @@
  <span class="input-name">direction</span> =
  <i class="input">
  <select name="direction" [(ngModel)]="options.direction">
- <option *ngFor="let d of directions" [ngValue]="d">{{ d }}</option>
+ @for (d of directions; track d) {
+ <option [ngValue]="d">{{ d }}</option>
+ }
  </select>
  </i>
  </span>
@@ -16,11 +18,13 @@
  </span>
 
  <span class="input-wrapper">
- <span class="input-name">trickleSpeed</span> = <i class="input"><input name="trickleSpeed" [(ngModel)]="options.trickleSpeed"></i>
+ <span class="input-name">trickleSpeed</span> = <i class="input"><input name="trickleSpeed"
+ [(ngModel)]="options.trickleSpeed"></i>
  </span>
 
  <span class="input-wrapper">
- <span class="input-name">debounceTime</span> = <i class="input"><input name="debounceTime" [(ngModel)]="options.debounceTime"></i>
+ <span class="input-name">debounceTime</span> = <i class="input"><input name="debounceTime"
+ [(ngModel)]="options.debounceTime"></i>
  </span>
 
  <span class="input-wrapper">
@@ -40,18 +44,13 @@
  <span class="input-wrapper">
  <span class="input-name">spinnerPosition</span> = <i class="input">
  <select name="spinnerPosition" [(ngModel)]="options.spinnerPosition">
- <option *ngFor="let p of spinnerPosition" [ngValue]="p">{{ p }}</option>
+ @for (p of spinnerPosition; track p) {
+ <option [ngValue]="p">{{ p }}</option>
+ }
  </select>
  </i>
  </span>
 
-<!-- <span class="input-wrapper">-->
-<!-- <span class="input-name">thick</span> = <i class="input">-->
-<!-- <input name="thick" type="checkbox" [(ngModel)]="options.thick">-->
-<!-- <span>{{ options.thick }}</span>-->
-<!-- </i>-->
-<!-- </span>-->
-
  <span class="input-wrapper">
  <span class="input-name">relative</span> = <i class="input">
  <input name="relative" type="checkbox" [(ngModel)]="options.relative">
@@ -60,17 +59,15 @@
  </span>
 
  <span class="input-wrapper">
- <span class="input-name">min</span> = <i class="input"><input type="number" name="min" min="0" max="99" [(ngModel)]="options.min"></i>
+ <span class="input-name">min</span> = <i class="input"><input type="number" name="min" min="0" max="99"
+ [(ngModel)]="options.min"></i>
  </span>
 
  <span class="input-wrapper">
- <span class="input-name">max</span> = <i class="input"><input type="number" name="max" min="1" max="100" [(ngModel)]="options.max"></i>
+ <span class="input-name">max</span> = <i class="input"><input type="number" name="max" min="1" max="100"
+ [(ngModel)]="options.max"></i>
  </span>
 
-<!-- <span class="input-wrapper">-->
-<!-- <span class="input-name">color</span> = <i class="input"><input name="color" [(ngModel)]="options.color"></i>-->
-<!-- </span>-->
-
  <span class="output-wrapper">
  <span class="output-name">started</span> = <i class="output">onStarted()</i>
  </span>

projects/ngx-progressbar-demo/src/app/home/lab/lab.component.ts

@@ -1,5 +1,4 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { NgProgressOptions } from 'ngx-progressbar';
 
@@ -9,23 +8,23 @@ import { NgProgressOptions } from 'ngx-progressbar';
  templateUrl: './lab.component.html',
  styleUrls: ['./lab.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [FormsModule, CommonModule]
+ imports: [FormsModule]
 })
 export class LabComponent {
 
- directions = [
+ directions: string[] = [
  'ltr+',
  'ltr-',
  'rtl+',
  'rtl-'
  ];
 
- spinnerPosition = [
+ spinnerPosition: string[] = [
  'right',
  'left'
  ];
 
  @Input() options: NgProgressOptions = {};
- @Output() optionsChange = new EventEmitter(true);
+ @Output() optionsChange: EventEmitter<boolean> = new EventEmitter(true);
 
 }

projects/ngx-progressbar/http/src/ng-progress-http.directive.ts

@@ -13,7 +13,7 @@ class NgProgressHttpBase {
  effect(() => {
  if (this.manager.requestsLoading()) {
  this.progressRef.start();
- } else {
+ } else if (this.progressRef.isActive) {
  this.progressRef.complete();
  }
  }, { allowSignalWrites: true });

projects/ngx-progressbar/package.json

@@ -1,6 +1,6 @@
 {
  "name": "ngx-progressbar",
- "version": "12.0.0",
+ "version": "12.0.1",
  "author": {
  "name": "Murhaf Sousli",
  "url": "https://github.com/MurhafSousli",

projects/ngx-progressbar/src/lib/ng-progress-ref.ts

@@ -1,8 +1,19 @@
-import { inject, signal, effect, computed, Directive, OnDestroy, Signal, WritableSignal, EffectCleanupRegisterFn } from '@angular/core';
+import {
+ inject,
+ signal,
+ effect,
+ computed,
+ Directive,
+ OnDestroy,
+ Signal,
+ WritableSignal,
+ EffectCleanupRegisterFn
+} from '@angular/core';
 import {
  Observable,
  Subject,
  Subscription,
+ BehaviorSubject,
  of,
  tap,
  delay,
@@ -14,6 +25,11 @@ import {
 } from 'rxjs';
 import { NgProgressOptions, NG_PROGRESS_OPTIONS } from './ng-progress.model';
 
+enum TriggerType {
+ START = 'START',
+ COMPLETE = 'COMPLETE'
+}
+
 @Directive({
  standalone: true,
  selector: '[ngProgressRef]',
@@ -27,15 +43,21 @@ export class NgProgressRef implements OnDestroy {
 
  private _active: WritableSignal<boolean> = signal<boolean>(false);
 
- active: Signal<boolean> = computed(() => this._active());
+ // A boolean flag that indicates the active state
+ isActive: boolean;
+
+ active: Signal<boolean> = computed(() => {
+ this.isActive = this._active();
+ return this.isActive;
+ });
 
  progress: Signal<number> = computed(() => this._progress());
 
  config: Signal<NgProgressOptions> = computed(() => this._config());
 
- private readonly _trigger: WritableSignal<boolean> = signal<boolean>(false);
+ private _trigger: BehaviorSubject<TriggerType> = new BehaviorSubject<TriggerType>(null);
 
- // Progress start source event (used to cancel finalizing delays)
+ // Progress start source event (used to cancel onComplete delays)
  private readonly _started: Subject<void> = new Subject<void>();
  readonly started: Observable<void> = this._started.asObservable();
 
@@ -54,20 +76,23 @@ export class NgProgressRef implements OnDestroy {
  effect((onCleanup: EffectCleanupRegisterFn) => {
  sub$?.unsubscribe();
 
- if (this._trigger()) {
- sub$ = timer(this.config().debounceTime).pipe(
- switchMap(() => this.onTrickling(this.config()))
- ).subscribe();
- } else {
- setTimeout(() => {
- sub$ = this.onComplete(this.config()).subscribe();
- });
- }
+ sub$ = this._trigger.pipe(
+ switchMap((trigger: TriggerType) => {
+ if (trigger === TriggerType.START) {
+ return timer(this.config().debounceTime).pipe(
+ switchMap(() => this.onTrickling(this.config()))
+ );
+ } else if (trigger === TriggerType.COMPLETE) {
+ return this.onComplete(this.config());
+ }
+ return EMPTY;
+ })
+ ).subscribe();
 
  onCleanup(() => {
  sub$?.unsubscribe();
  });
- });
+ }, { allowSignalWrites: true });
  }
 
  ngOnDestroy(): void {
@@ -80,15 +105,15 @@ export class NgProgressRef implements OnDestroy {
  */
  start(): void {
  this._started.next();
- this._trigger.set(true);
+ this._trigger.next(TriggerType.START);
  this._active.set(true);
  }
 
  /**
  * Complete the progress
  */
  complete(): void {
- this._trigger.set(false);
+ this._trigger.next(TriggerType.COMPLETE);
  }
 
  /**
@@ -110,6 +135,8 @@ export class NgProgressRef implements OnDestroy {
  * Set the progress
  */
  set(n: number): void {
+ // this._trigger.set(TriggerType.SET);
+ this._active.set(true);
  this._progress.set(this.clamp(n));
  }
 

projects/ngx-progressbar/src/lib/tests/ng-progress-http.spec.ts

@@ -40,18 +40,18 @@ describe(`NgProgressHttp`, () => {
  httpClient = TestBed.inject(HttpClient);
  httpTestingController = TestBed.inject(HttpTestingController);
 
- const startSpy: jasmine.Spy = spyOn(progressRef, 'start');
+ const startSpy: jasmine.Spy = spyOn(progressRef, 'start').and.callThrough();
  const completeSpy: jasmine.Spy = spyOn(progressRef, 'complete');
 
  httpClient.get('/users').subscribe(() => {
- // Check that progress.complete() has been called after the request is completed
- // Need to check that async
  setTimeout(() => {
+ // Check that progress.complete() has been called after the request is completed
  expect(completeSpy).toHaveBeenCalled();
  done();
  });
  });
 
+ // Need to detect changes
  fixture.detectChanges();
 
  // Check that progress.start() has been called
@@ -60,7 +60,7 @@ describe(`NgProgressHttp`, () => {
  const req: TestRequest = httpTestingController.expectOne('/users');
  expect(req.request.method).toEqual('GET');
 
- // Complete the request after a tiny delay
+ // Complete the request after 200ms delay
  setTimeout(() => {
  req.flush({});
  }, 200);

projects/ngx-progressbar/src/lib/tests/ng-progress-ref.spec.ts

@@ -46,7 +46,7 @@ describe('NgProgressRef', () => {
  expect(directive.active()).toBeFalse();
  });
 
- it('should start and complete the progress', (done: DoneFn) => {
+ it('should call continuously call set() on trickling', (done: DoneFn) => {
  const setSpy: jasmine.Spy = spyOn(directive, 'set');
  // Assume active state is off
  directive['_active'].set(false);
@@ -57,6 +57,18 @@ describe('NgProgressRef', () => {
  });
  });
 
+ it('should set the progress even if it has not started', async () => {
+ // Assume active state is off
+ directive.set(40);
+ fixture.detectChanges();
+ expect(directive.progress()).toBe(40);
+ expect(directive.active()).toBeTrue();
+
+ directive.complete();
+ fixture.detectChanges();
+ await afterTimeout(350);
+ expect(directive.active()).toBeFalse();
+ });
 
  it('should increment the progress when inc function is called', async () => {
  directive.inc();
@@ -94,13 +106,20 @@ describe('NgProgressRef', () => {
  directive.setConfig(newConfig);
  expect(directive.config()).toEqual(newConfig);
  });
+
+ it('should not do anything if complete() is called when progress has not started', () => {
+ const completeSpy: jasmine.Spy = spyOn(directive, 'complete').and.callThrough();
+ directive.complete();
+ fixture.detectChanges();
+ expect(completeSpy).toHaveBeenCalled();
+ });
 });
 
 @Component({
  standalone: true,
  imports: [NgProgressRef],
  template: `
- <div ngProgressRef></div>
+  <div ngProgressRef></div>
  `
 })
 class TestComponent {