Update demo

projects/ngx-progressbar-demo/src/app/app-routes.ts

@@ -0,0 +1,12 @@
+import { Routes } from '@angular/router';
+
+export const appRoutes: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('./home/home.component').then(m => m.HomeComponent)
+  },
+  {
+    path: 'custom',
+    loadComponent: () => import('./custom/custom.component').then(m => m.CustomComponent)
+  }
+];

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

@@ -10,12 +10,7 @@ import { HeaderComponent } from './header/header.component';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    RouterModule,
-    HeaderComponent,
-    NgProgressbar,
-    NgProgressRouter
-  ]
+  imports: [RouterModule, HeaderComponent, NgProgressbar, NgProgressRouter]
 })
 export class AppComponent {
 }

projects/ngx-progressbar-demo/src/app/custom/custom.component.scss

@@ -11,7 +11,7 @@ mat-progress-spinner {
 
 .bar-placeholder {
   height: 4px;
-  background-color: #d1c4e9;
+  background-color: var(--mdc-linear-progress-track-color);
 }
 
 mat-card {

projects/ngx-progressbar-demo/src/app/custom/custom.component.ts

@@ -1,11 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatCardModule } from '@angular/material/card';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MatIcon } from '@angular/material/icon';
+import { MatFabButton } from '@angular/material/button';
+import { MatProgressBar } from '@angular/material/progress-bar';
+import { MatCard } from '@angular/material/card';
 import { NgProgressRef } from 'ngx-progressbar';
 
 @Component({
@@ -23,7 +22,7 @@ import { NgProgressRef } from 'ngx-progressbar';
     ])
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, MatCardModule, MatProgressBarModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule, NgProgressRef]
+  imports: [MatCard, MatProgressBar, MatIcon, MatProgressSpinner, NgProgressRef, MatFabButton]
 })
 export class CustomComponent {
 }

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

@@ -1,5 +1,5 @@
 <div class="progressbar-container">
-  <ng-progress #labProgress
+  <ng-progress #labProgress="ngProgress"
                ngProgressHttp
                [flat]="options.flat"
                [min]="options.min"
@@ -63,15 +63,15 @@
     </tr>
   </table>
   <div class="events">
-    <span class="chip" [class.changed]="startedClass | async"> NgProgress.
+    <span class="chip" [class.changed]="startedClass()"> NgProgress.
       <strong>started</strong>
     </span>
-    <span class="chip" [class.changed]="endedClass | async"> NgProgress.
+    <span class="chip" [class.changed]="endedClass()"> NgProgress.
       <strong>completed</strong>
     </span>
 
-    <button class="chip" (click)="testHttp()" [disabled]="preventAbuse | async">
-      {{ (preventAbuse | async) ? 'Wait...' : 'Test Http Request' }}
+    <button class="chip" (click)="testHttp()" [disabled]="preventAbuse()">
+      {{ preventAbuse() ? 'Wait...' : 'Test Http Request' }}
     </button>
   </div>
 </div>

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

@@ -1,21 +1,16 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, signal, inject, WritableSignal, ChangeDetectionStrategy } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Subject } from 'rxjs';
 import { NgProgressbar, NgProgressOptions } from 'ngx-progressbar';
-import { NgProgressHttp, provideNgProgressHttp } from 'ngx-progressbar/http';
+import { NgProgressHttp } from 'ngx-progressbar/http';
 import { LabComponent } from './lab/lab.component';
 
 @Component({
+  standalone: true,
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  providers: [
-    // provideNgProgressHttp(),
-  ],
-  imports: [CommonModule, NgProgressbar, LabComponent, NgProgressHttp]
+  imports: [NgProgressbar, LabComponent, NgProgressHttp]
 })
 export class HomeComponent {
 
@@ -32,36 +27,33 @@ export class HomeComponent {
     spinner: true
   };
 
-  preventAbuse = new Subject<boolean>();
-  startedClass = new Subject<boolean>();
-  endedClass = new Subject<boolean>();
+  private readonly http: HttpClient = inject(HttpClient);
 
-  constructor(private http: HttpClient) {
-  }
+  preventAbuse: WritableSignal<boolean> = signal<boolean>(false);
+  startedClass: WritableSignal<boolean> = signal<boolean>(false);
+  endedClass: WritableSignal<boolean> = signal<boolean>(false);
 
-  onProgressStarted() {
-    this.startedClass.next(true);
+  onProgressStarted(): void {
+    this.startedClass.set(true);
     setTimeout(() => {
-      this.startedClass.next(false);
+      this.startedClass.set(false);
     }, 800);
   }
 
-  onProgressCompleted() {
-    this.endedClass.next(true);
+  onProgressCompleted(): void {
+    this.endedClass.set(true);
     setTimeout(() => {
-      this.endedClass.next(false);
+      this.endedClass.set(false);
     }, 800);
   }
 
-  testHttp() {
-    this.preventAbuse.next(true);
+  testHttp(): void {
+    this.preventAbuse.set(true);
 
-    this.http.get('https://reqres.in/api/users?delay=1')
-      .subscribe(() => {
-        setTimeout(() => {
-          this.preventAbuse.next(false);
-        }, 800);
-      });
+    this.http.get('https://reqres.in/api/users?delay=1').subscribe(() => {
+      setTimeout(() => {
+        this.preventAbuse.set(false);
+      }, 800);
+    });
   }
-
 }

projects/ngx-progressbar-demo/src/m3-theme.scss

@@ -0,0 +1,144 @@
+// This file was generated by running 'ng generate @angular/material:m3-theme'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #1EB77F, secondary: #2C7CD1, tertiary: #92c34e
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #002113,
+    20: #003824,
+    25: #00452c,
+    30: #005236,
+    35: #005f3f,
+    40: #006c48,
+    50: #00885c,
+    60: #00a571,
+    70: #30c188,
+    80: #55dea2,
+    90: #74fbbd,
+    95: #beffdb,
+    98: #e8ffef,
+    99: #f4fff6,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #001c39,
+    20: #00315d,
+    25: #003c70,
+    30: #004884,
+    35: #005398,
+    40: #005fad,
+    50: #2779cd,
+    60: #4a93e9,
+    70: #6faeff,
+    80: #a4c9ff,
+    90: #d4e3ff,
+    95: #ebf1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #112000,
+    20: #203600,
+    25: #294200,
+    30: #314f00,
+    35: #3a5c00,
+    40: #436900,
+    50: #578311,
+    60: #709e2d,
+    70: #89ba46,
+    80: #a4d65e,
+    90: #bff377,
+    95: #d3ff96,
+    98: #f0ffd5,
+    99: #f9ffe8,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #161d19,
+    20: #2b322d,
+    25: #363d38,
+    30: #414843,
+    35: #4d544f,
+    40: #59605b,
+    50: #717973,
+    60: #8b938c,
+    70: #a6ada7,
+    80: #c1c8c2,
+    90: #dde4dd,
+    95: #ebf3eb,
+    98: #f4fbf4,
+    99: #f7fef7,
+    100: #ffffff,
+    4: #09100c,
+    6: #0e1511,
+    12: #1a211d,
+    17: #252c27,
+    22: #2f3632,
+    24: #343b36,
+    87: #d5dcd5,
+    92: #e3eae3,
+    94: #e9f0e9,
+    96: #eef5ee,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #121e17,
+    20: #27332c,
+    25: #313e37,
+    30: #3d4a42,
+    35: #48564d,
+    40: #546259,
+    50: #6d7a71,
+    60: #86948a,
+    70: #a0afa4,
+    80: #bccabf,
+    90: #d7e6db,
+    95: #e6f4e9,
+    98: #eefdf2,
+    99: #f4fff6,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes,  neutral-variant),
+  error: map.get($_palettes, error),
+);
+$_primary: map.merge(map.get($_palettes, primary), $_rest);
+$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
+
+$light-theme: mat.define-theme((
+  color: (
+    theme-type: light,
+    primary: $_primary,
+    tertiary: $_tertiary,
+  ),
+));

projects/ngx-progressbar-demo/src/main.ts

@@ -1,23 +1,20 @@
-import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { enableProdMode } from '@angular/core';
 import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
 import { provideAnimations } from '@angular/platform-browser/animations';
-import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
-
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideRouter, withHashLocation } from '@angular/router';
+import { progressInterceptor } from 'ngx-progressbar/http';
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { AppRoutingModule } from './app/routing.module';
-import { progressInterceptor } from 'ngx-progressbar/http';
+import { appRoutes } from './app/app-routes';
 
 if (environment.production) {
   enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
   providers: [
-    importProvidersFrom(
-      BrowserModule,
-      AppRoutingModule
-    ),
+    provideRouter(appRoutes, withHashLocation()),
     provideAnimations(),
     provideHttpClient(
       withFetch(),