code optimizations and angular version upgrade

angular.json

@@ -19,7 +19,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/service-provider-app",
             "index": "src/index.html",
@@ -50,8 +50,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
+                  "maximumWarning": "2MB",
-                  "maximumError": "1MB"
+                  "maximumError": "3MB"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -76,7 +76,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "service-provider-app:build:production"
@@ -89,10 +89,10 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
+          "builder": "@angular/build:extract-i18n"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": [
               "zone.js",
@@ -117,5 +117,31 @@
   },
   "cli": {
     "analytics": "b249b897-1dd5-450b-9f05-d8dfa49b1876"
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

package.json

@@ -11,18 +11,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^19.2.16",
+    "@angular/cdk": "^20.0.4",
-    "@angular/common": "^19.2.0",
+    "@angular/common": "^20.0.5",
-    "@angular/compiler": "^19.2.0",
+    "@angular/compiler": "^20.0.5",
-    "@angular/core": "^19.2.0",
+    "@angular/core": "^20.0.5",
-    "@angular/forms": "^19.2.0",
+    "@angular/forms": "^20.0.5",
-    "@angular/material": "^19.2.16",
+    "@angular/material": "^20.0.4",
-    "@angular/material-moment-adapter": "^19.2.16",
+    "@angular/material-moment-adapter": "^20.0.4",
-    "@angular/platform-browser": "^19.2.0",
+    "@angular/platform-browser": "^20.0.5",
-    "@angular/platform-browser-dynamic": "^19.2.0",
+    "@angular/platform-browser-dynamic": "^20.0.5",
-    "@angular/platform-server": "^19.2.0",
+    "@angular/platform-server": "^20.0.5",
-    "@angular/router": "^19.2.0",
+    "@angular/router": "^20.0.5",
-    "@angular/ssr": "^19.2.5",
+    "@angular/ssr": "^20.0.4",
     "chart.js": "^4.3.0",
     "express": "^4.18.2",
     "ng2-charts": "^8.0.0",
@@ -32,9 +32,9 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.5",
+    "@angular/build": "^20.0.4",
-    "@angular/cli": "^19.2.5",
+    "@angular/cli": "^20.0.4",
-    "@angular/compiler-cli": "^19.2.0",
+    "@angular/compiler-cli": "^20.0.5",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
@@ -44,6 +44,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.7.2"
+    "typescript": "~5.8.3"
   }
 }

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { CommonModule } from '@angular/common';
@@ -17,8 +17,7 @@ export class AppComponent {
   isUserLoggedIn = false;
   private userSubscription!: Subscription;
 
-  constructor(private userService: UserService
+  private userService = inject(UserService);
-  ) { }
   
   ngOnInit(): void {
 

src/app/app.config.server.ts

@@ -1,14 +1,10 @@
+import { provideServerRendering, withRoutes } from '@angular/ssr';
 import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
-import { provideServerRendering } from '@angular/platform-server';
-import { provideServerRouting } from '@angular/ssr';
 import { appConfig } from './app.config';
 import { serverRoutes } from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
-  providers: [
+  providers: [provideServerRendering(withRoutes(serverRoutes))]
-    provideServerRendering(),
-    provideServerRouting(serverRoutes)
-  ]
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

src/app/app.routes.server.ts

@@ -1,6 +1,13 @@
 import { RenderMode, ServerRoute } from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
+  { path: ':appId', renderMode: RenderMode.Client },
+  { path: ':appId/home', renderMode: RenderMode.Client },
+  { path: ':appId/usersettings', renderMode: RenderMode.Client },
+  { path: ':appId/service-provider/:id', renderMode: RenderMode.Client },
+  { path: ':appId/preparer', renderMode: RenderMode.Client },
+  { path: ':appId/preparer/:id', renderMode: RenderMode.Client },
+  { path: ':appId/add-preparer', renderMode: RenderMode.Client },
   {
     path: '**',
     renderMode: RenderMode.Prerender

src/app/common/secured-header/secured-header.component.ts

@@ -1,10 +1,11 @@
-import { Component, effect, OnInit } from '@angular/core';
+import { Component, effect, inject, OnInit } from '@angular/core';
 import { UserService } from '../../core/services/common/user.service';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
 import { NavigationService } from '../../core/services/common/navigation.service';
 import { User } from '../../core/models/user';
 import { AuthService } from '../../core/services/common/auth.service';
+import { ThemeService } from '../../core/services/theme.service';
 
 @Component({
   selector: 'app-secured-header',
@@ -18,10 +19,12 @@ export class SecuredHeaderComponent implements OnInit {
   showProfileMenu: boolean = false;
   userDetails: User | null = {};
 
+  private userService = inject(UserService);
+  private authService = inject(AuthService);
+  private navigationService = inject(NavigationService);
+  private themeService = inject(ThemeService);
+
   constructor(
-    private userService: UserService,
-    private navigationService: NavigationService,
-    private authService: AuthService
   ) {
     effect(() => {
       this.userDetails = this.userService.userDetailsSignal();
@@ -40,6 +43,9 @@ export class SecuredHeaderComponent implements OnInit {
   setApplicationDetails() {
     if (this.userDetails?.userDetails) {
       this.logoUrl = `images/logos/${this.userDetails?.userDetails?.logoName}`;
+      this.themeService.setTheme(this.userDetails?.userDetails?.themeName);
+    } else {
+      this.themeService.setTheme('default');
     }
   }
 

src/app/core/interceptors/auth.interceptor.ts

@@ -1,5 +1,5 @@
 // auth.interceptor.ts
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
 import { Observable, throwError, BehaviorSubject } from 'rxjs';
 import { catchError, filter, switchMap, take } from 'rxjs/operators';
@@ -13,7 +13,7 @@ export class AuthInterceptor implements HttpInterceptor {
 
   private requestQueue: { request: HttpRequest<any>, next: HttpHandler }[] = [];
 
-  constructor(private authService: AuthService) { }
+  private authService = inject(AuthService);
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
 

src/app/core/services/common/auth.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
-import { Observable, tap } from 'rxjs';
+import { Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
 import { UserService } from './user.service';
 import { StorageService } from './storage.service';
@@ -15,14 +15,13 @@ import { ApiErrorHandlerService } from './api-error-handler.service';
 export class AuthService {
   private apiUrl = environment.apiUrl;
 
-  constructor(private http: HttpClient,
+  private http = inject(HttpClient);
-    private userService: UserService,
+  private userService = inject(UserService);
-    private storageService: StorageService,
+  private storageService = inject(StorageService);
-    private router: Router,
+  private router = inject(Router);
-    private themeService: ThemeService,
+  private themeService = inject(ThemeService);
-    private notificationService: NotificationService,
+  private notificationService = inject(NotificationService);
-    private errorHandler: ApiErrorHandlerService
+  private errorHandler = inject(ApiErrorHandlerService);
-  ) { }
 
   login(username: string, password: string): Observable<any> {
     return this.http.post(`${this.apiUrl}/login`, { p_emailaddr: username, p_password: password });

src/app/core/services/common/common.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { catchError, map, Observable, of } from 'rxjs';
 import { Region } from '../../models/region';
 import { State } from '../../models/state';
@@ -20,7 +20,7 @@ export class CommonService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient) { }
+  private http = inject(HttpClient);
 
   getCountries(spid: number = 0): Observable<Country[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetParamValues?P_PARAMTYPE=002&P_SPID=0`).pipe(

src/app/core/services/common/cookie.service.ts

@@ -1,11 +1,11 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { CookieService as NgxCookieService } from 'ngx-cookie-service';
 
 @Injectable({
     providedIn: 'root'
 })
 export class CookieHelperService {
-    constructor(private ngxCookieService: NgxCookieService) { }
+    private ngxCookieService = inject(NgxCookieService);
 
     /**
      * Get a value from cookie

src/app/core/services/common/navigation.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { Location } from '@angular/common';
 import { StorageService } from './storage.service';
@@ -11,9 +11,9 @@ export class NavigationService {
 
   private readonly USER_APPID_KEY = 'CurrentAppId';
 
-  constructor(private router: Router,
+  private router = inject(Router);
-    private location: Location,
+  private location = inject(Location);
-    private storageService: StorageService) { }
+  private storageService = inject(StorageService);
 
   setCurrentAppId(appId: string): void {
     this.storageService.setItem(this.USER_APPID_KEY, appId);

src/app/core/services/common/notification.service.ts

@@ -1,11 +1,13 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Injectable({
   providedIn: 'root'
 })
 export class NotificationService {
-  constructor(private snackBar: MatSnackBar) { }
+
+  private snackBar = inject(MatSnackBar);
+
 
   showSuccess(message: string): void {
     this.snackBar.open(message, 'Close', {

src/app/core/services/common/storage.service.ts

@@ -7,7 +7,6 @@ import { inject, Injectable, PLATFORM_ID } from '@angular/core';
 export class StorageService {
   private readonly platformId = inject(PLATFORM_ID);
 
-  constructor() { }
   setItem(key: string, value: string): void {
     sessionStorage.setItem(key, value);
   }

src/app/core/services/common/user.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, signal } from '@angular/core';
+import { afterNextRender, inject, Injectable, signal } from '@angular/core';
 import { StorageService } from './storage.service';
 import { BehaviorSubject, map, Observable, of, Subject, tap } from 'rxjs';
 import { environment } from '../../../../environments/environment';
@@ -21,7 +21,22 @@ export class UserService {
 
   private userLoggedInSubject = new BehaviorSubject<boolean>(false);
 
-  constructor(private http: HttpClient, private storageService: StorageService) { }
+  private http = inject(HttpClient);
+  private storageService = inject(StorageService);
+
+  constructor() {
+    afterNextRender(() => {
+      // Initialize user details from storage if available
+      const userDetails = this.getUserDetails();
+      if (userDetails) {
+        this.userDetailsSignal.set(userDetails);
+      }
+
+      // Check if user is logged in
+      const userEmail = this.getUser();
+      this.userLoggedInSubject.next(!!userEmail);
+    });
+  }
 
   watchUser(): Observable<boolean> {
     return this.userLoggedInSubject.asObservable();

src/app/core/services/home.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { environment } from '../../../environments/environment';
 import { UserService } from './common/user.service';
@@ -11,7 +11,8 @@ export class HomeService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
 
   getCarnetSummaryData(): Observable<any> {
     const userid = this.userService.getUser();

src/app/core/services/preparer/basic-detail.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { UserService } from '../common/user.service';
 import { environment } from '../../../../environments/environment';
 import { BasicDetail } from '../../models/preparer/basic-detail';
@@ -12,7 +12,8 @@ export class BasicDetailService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
 
   getBasicDetailsById(id: number): BasicDetail | any {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetPreparerByClientid/${this.userService.getUserSpid()}/${id}`).pipe(

src/app/core/services/preparer/client.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { environment } from '../../../../environments/environment';
 import { HttpClient } from '@angular/common/http';
 import { UserService } from '../common/user.service';
@@ -13,7 +13,8 @@ export class ClientService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
 
   getPreparers(filter: PreparerFilter): Observable<BasicDetail[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetPreparers/${this.userService.getUserSpid()}/ACTIVE?P_NAME=${filter.name}&P_LOOKUPCODE=${filter.lookupCode}&P_CITY=${filter.city}&P_STATE=${filter.state}`).pipe(

src/app/core/services/preparer/contact.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { UserService } from '../common/user.service';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '../../../../environments/environment';
@@ -13,7 +13,8 @@ export class ContactService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
 
   getContactsById(id: number): Observable<Contact[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetPreparerContactsByClientid/${this.userService.getUserSpid()}/${id}`).pipe(

src/app/core/services/preparer/location.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { environment } from '../../../../environments/environment';
 import { HttpClient } from '@angular/common/http';
 import { UserService } from '../common/user.service';
@@ -12,7 +12,8 @@ export class LocationService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
 
   getLocationsById(id: number): Observable<Location[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetPreparerLocByClientid/${this.userService.getUserSpid()}/${id}`).pipe(

src/app/core/services/service-provider/basic-detail.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { BasicDetail } from '../../models/service-provider/basic-detail';
 import { filter, map, Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
@@ -12,7 +12,8 @@ export class BasicDetailService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
 
   getBasicDetailsById(id: number): BasicDetail | any {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetSelectedServiceprovider/${id}`).pipe(

src/app/core/services/service-provider/basic-fee.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { environment } from '../../../../environments/environment';
 import { HttpClient } from '@angular/common/http';
 import { map, Observable } from 'rxjs';
@@ -13,7 +13,9 @@ export class BasicFeeService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService, private commonService: CommonService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
+  private commonService = inject(CommonService);
 
   getBasicFees(spid: number): Observable<BasicFee[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetBasicFeeRates/${spid}/ACTIVE`).pipe(

src/app/core/services/service-provider/carnet-fee.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { map, Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
@@ -13,7 +13,9 @@ export class CarnetFeeService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService, private commonService: CommonService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
+  private commonService = inject(CommonService);
 
   getFeeCommissions(spid: number): Observable<CarnetFee[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetFeeComm/${spid}/ACTIVE`).pipe(

src/app/core/services/service-provider/carnet-sequence.service.ts

@@ -1,9 +1,8 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
 import { CarnetSequence } from '../../models/service-provider/carnet-sequence';
-import { UserService } from '../common/user.service';
 
 @Injectable({
   providedIn: 'root'
@@ -12,7 +11,7 @@ export class CarnetSequenceService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService) { }
+  private http = inject(HttpClient);
 
   getCarnetSequenceById(id: number): Observable<CarnetSequence[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetCarnetSequence/${id}`).pipe(

src/app/core/services/service-provider/contact.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
 import { Contact } from '../../models/service-provider/contact';
@@ -12,7 +12,8 @@ export class ContactService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
 
   getContactsById(id: number): Observable<Contact[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetSPAllContacts/${id}`).pipe(

src/app/core/services/service-provider/continuation-sheet-fee.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '../../../../environments/environment';
@@ -13,7 +13,9 @@ export class ContinuationSheetFeeService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService, private commonService: CommonService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
+  private commonService = inject(CommonService);
 
   getContinuationSheets(spid: number): Observable<ContinuationSheetFee[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetCsFeeRates/${spid}/ACTIVE`).pipe(

src/app/core/services/service-provider/counterfoil-fee.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { map, Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
@@ -13,7 +13,9 @@ export class CounterfoilFeeService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService, private commonService: CommonService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
+  private commonService = inject(CommonService);
   
   getCounterfoils(spid: number): Observable<CounterfoilFee[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetCfFeeRates/${spid}/ACTIVE`).pipe(

src/app/core/services/service-provider/expedited-fee.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '../../../../environments/environment';
@@ -13,7 +13,9 @@ export class ExpeditedFeeService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService, private commonService: CommonService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
+  private commonService = inject(CommonService);
 
   getExpeditedFees(spid: number): Observable<ExpeditedFee[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetEfFeeRates/${spid}/ACTIVE`).pipe(

src/app/core/services/service-provider/security-deposit.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
 import { SecurityDeposit } from '../../models/service-provider/security-deposit';
@@ -13,7 +13,9 @@ export class SecurityDepositService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService, private commonService: CommonService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
+  private commonService = inject(CommonService);
 
   getSecurityDeposits(spid: number): Observable<SecurityDeposit[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetBondRates/${spid}/ACTIVE`).pipe(

src/app/core/services/stylemanager.service.ts

@@ -5,8 +5,6 @@ import { Injectable } from '@angular/core';
 })
 export class StyleManagerService {
 
-  constructor() { }
-
   /**
    * Set the stylesheet with the specified key.
    */

src/app/core/services/theme.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { StyleManagerService } from './stylemanager.service';
 
 @Injectable({
@@ -6,8 +6,7 @@ import { StyleManagerService } from './stylemanager.service';
 })
 export class ThemeService {
 
-  constructor(private styleManager: StyleManagerService) {
+  private styleManager = inject(StyleManagerService);
-  }
 
   setTheme(themeToSet: string) {
 

src/app/core/services/user-preference.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { DEFAULT_USER_PREFERENCES, UserPreferences } from '../models/user-preference';
 import { CookieHelperService } from './common/cookie.service';
 
@@ -8,7 +8,7 @@ import { CookieHelperService } from './common/cookie.service';
 export class UserPreferencesService {
     private readonly COOKIE_KEY = 'user_preferences';
 
-    constructor(private cookieService: CookieHelperService) { }
+    private cookieService = inject(CookieHelperService);
 
     getPreferences(): UserPreferences {
         const preferences = this.cookieService.get<UserPreferences>(this.COOKIE_KEY);

src/app/guards/appid.guard.ts

@@ -1,17 +1,18 @@
 import { ActivatedRouteSnapshot, CanActivate, CanActivateFn, Router, RouterStateSnapshot } from '@angular/router';
 import { NavigationService } from '../core/services/common/navigation.service';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AppIdGuard implements CanActivate {
-  constructor(private navigationService: NavigationService, private router: Router) { }
+
+  private navigationService = inject(NavigationService);
+  private router = inject(Router);
 
   canActivate(
     next: ActivatedRouteSnapshot,
     state: RouterStateSnapshot): boolean {
-
     const appId = next.params['appId'];
     const currentAppId = this.navigationService.getCurrentAppId();
     if (appId === currentAppId) {

src/app/guards/auth.guard.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
 import { UserService } from '../core/services/common/user.service';
 
@@ -6,7 +6,9 @@ import { UserService } from '../core/services/common/user.service';
   providedIn: 'root'
 })
 export class AuthGuard implements CanActivate {
-  constructor(private userService: UserService, private router: Router) { }
+
+  private userService = inject(UserService);
+  private router = inject(Router);
 
   canActivate(
     next: ActivatedRouteSnapshot,

src/app/home/chart/chart.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
-import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
+import { ChartConfiguration, ChartData, ChartType } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { CarnetStatus } from '../../core/models/carnet-status';
@@ -17,7 +17,7 @@ export class ChartComponent {
   @Input() carnetStatuses: CarnetStatus[] = [];
   @Output() carnetStatusData = new EventEmitter<any>();
 
-  constructor(private navigationService: NavigationService) { }
+  private navigationService = inject(NavigationService);
 
   navigateToManageProvider(spid: number): void {
     this.navigationService.navigate(['service-provider', spid]);

src/app/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, inject, ViewChild } from '@angular/core';
 import { HomeService } from '../core/services/home.service';
 import { AngularMaterialModule } from '../shared/module/angular-material.module';
 import { ChartComponent } from './chart/chart.component';
@@ -42,13 +42,12 @@ export class HomeComponent {
 
   displayedColumns: string[] = ['applicationName', 'holderName', 'carnetNumber', 'usSets', 'foreignSets', 'transitSets', 'carnetValue', 'issueDate', 'expiryDate', 'orderType', 'carnetStatus'];
 
+  private homeService = inject(HomeService);
+  private errorHandler = inject(ApiErrorHandlerService);
+  private notificationService = inject(NotificationService);
+  private commonService = inject(CommonService);
 
-  constructor(
+  constructor(userPrefenceService: UserPreferencesService) {
-    private homeService: HomeService,
-    private errorHandler: ApiErrorHandlerService,
-    private notificationService: NotificationService,
-    userPrefenceService: UserPreferencesService,
-    private commonService: CommonService) {
     this.userPreferences = userPrefenceService.getPreferences();
   }
 

src/app/login/login.component.ts

@@ -1,11 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { Router } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { AngularMaterialModule } from '../shared/module/angular-material.module';
 import { AuthService } from '../core/services/common/auth.service';
 import { NavigationService } from '../core/services/common/navigation.service';
-import { HomeService } from '../core/services/home.service';
 import { UserService } from '../core/services/common/user.service';
 import { User } from '../core/models/user';
 import { ThemeService } from '../core/services/theme.service';
@@ -21,15 +19,13 @@ export class LoginComponent {
   isLoading = false;
   errorMessage = '';
 
-  constructor(
+  private authService = inject(AuthService);
-    private fb: FormBuilder,
+  private userService = inject(UserService);
-    private authService: AuthService,
+  private navigationService = inject(NavigationService);
-    private userService: UserService,
+  private themeService = inject(ThemeService);
-    private homeService: HomeService,
+  private fb = inject(FormBuilder);
-    private navigationService: NavigationService,
+
-    private router: Router,
+  constructor() {
-    private themeService: ThemeService
-  ) {
     this.loginForm = this.fb.group({
       username: ['', Validators.required],
       password: ['', Validators.required]

src/app/preparer/add/add-preparer.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
 import { UserPreferences } from '../../core/models/user-preference';

src/app/preparer/basic-details/basic-details.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Subject, takeUntil } from 'rxjs';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
@@ -38,13 +38,14 @@ export class BasicDetailsComponent implements OnInit, OnDestroy {
 
   private destroy$ = new Subject<void>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private commonService = inject(CommonService);
-    private commonService: CommonService,
+  private basicDetailService = inject(BasicDetailService);
-    private basicDetailService: BasicDetailService,
+  private locationService = inject(LocationService);
-    private locationService: LocationService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private errorHandler: ApiErrorHandlerService) {
+
+  constructor() {
     this.basicDetailsForm = this.createForm();
   }
 

src/app/preparer/contacts/contacts.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, Output, ViewChild } from '@angular/core';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { CustomPaginator } from '../../shared/custom-paginator';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
@@ -53,13 +53,13 @@ export class ContactsComponent {
   @Input() userPreferences: UserPreferences = {};
   @Output() hasContacts = new EventEmitter<boolean>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private contactService = inject(ContactService);
-    private contactService: ContactService,
+  private dialog = inject(MatDialog);
-    private notificationService: NotificationService,
+  private notificationService = inject(NotificationService);
-    private dialog: MatDialog,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private errorHandler: ApiErrorHandlerService
+
-  ) {
+  constructor() {
     this.contactForm = this.fb.group({
       firstName: ['', [Validators.required, Validators.maxLength(50)]],
       lastName: ['', [Validators.required, Validators.maxLength(50)]],

src/app/preparer/edit/edit-preparer.component.ts

@@ -1,4 +1,4 @@
-import { afterNextRender, Component, viewChild } from '@angular/core';
+import { afterNextRender, Component, inject, viewChild } from '@angular/core';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { BasicDetailsComponent } from '../basic-details/basic-details.component';
 import { ContactsComponent } from '../contacts/contacts.component';
@@ -22,7 +22,9 @@ export class EditPreparerComponent {
   clientName: string | null = null;
   userPreferences: UserPreferences;
 
-  constructor(private route: ActivatedRoute, private userPrefenceService: UserPreferencesService) {
+  private route = inject(ActivatedRoute);
+
+  constructor(userPrefenceService: UserPreferencesService) {
     this.userPreferences = userPrefenceService.getPreferences();
     afterNextRender(() => {
       // Open all panels

src/app/preparer/location/location.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, Output, ViewChild } from '@angular/core';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -9,13 +9,10 @@ import { UserPreferences } from '../../core/models/user-preference';
 import { Location } from '../../core/models/preparer/location';
 import { LocationService } from '../../core/services/preparer/location.service';
 import { NotificationService } from '../../core/services/common/notification.service';
-import { MatDialog } from '@angular/material/dialog';
 import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
 import { CustomPaginator } from '../../shared/custom-paginator';
-import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/confirm-dialog.component';
 import { ZipCodeValidator } from '../../shared/validators/zipcode-validator';
 import { Country } from '../../core/models/country';
-import { Region } from '../../core/models/region';
 import { State } from '../../core/models/state';
 import { Subject, takeUntil } from 'rxjs';
 import { CommonService } from '../../core/services/common/common.service';
@@ -56,14 +53,13 @@ export class LocationComponent {
 
   private destroy$ = new Subject<void>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private locationService = inject(LocationService);
-    private locationService: LocationService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private dialog: MatDialog,
+  private commonService = inject(CommonService);
-    private errorHandler: ApiErrorHandlerService,
+
-    private commonService: CommonService
+  constructor() {
-  ) {
     this.locationForm = this.fb.group({
       name: ['', [Validators.required, Validators.maxLength(100)]],
       address1: ['', [Validators.required, Validators.maxLength(100)]],

src/app/preparer/manage/manage-preparer.component.ts

@@ -1,11 +1,11 @@
-import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { Subject, takeUntil } from 'rxjs';
+import { Subject } from 'rxjs';
 import { BasicDetail } from '../../core/models/preparer/basic-detail';
 import { NotificationService } from '../../core/services/common/notification.service';
 import { NavigationService } from '../../core/services/common/navigation.service';
@@ -15,9 +15,6 @@ import { ClientService } from '../../core/services/preparer/client.service';
 import { PreparerFilter } from '../../core/models/preparer/preparer-filter';
 import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
 import { CustomPaginator } from '../../shared/custom-paginator';
-import { CommonService } from '../../core/services/common/common.service';
-import { Region } from '../../core/models/region';
-import { Country } from '../../core/models/country';
 
 @Component({
   selector: 'app-manage',
@@ -47,14 +44,13 @@ export class ManagePreparerComponent implements OnInit, OnDestroy, AfterViewInit
 
   private destroy$ = new Subject<void>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private clientService = inject(ClientService);
-    private notificationService: NotificationService,
+  private navigationService = inject(NavigationService);
-    private userPrefenceService: UserPreferencesService,
+  private notificationService = inject(NotificationService);
-    private navigationService: NavigationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private clientService: ClientService,
+
-    private errorHandler: ApiErrorHandlerService,
+  constructor(userPrefenceService: UserPreferencesService
-    private commonService: CommonService
   ) {
     this.userPreferences = userPrefenceService.getPreferences();
     this.searchForm = this.createSearchForm();

src/app/service-provider/basic-details/basic-details.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter, OnDestroy, inject } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -42,13 +42,13 @@ export class BasicDetailsComponent implements OnInit, OnDestroy {
 
   private destroy$ = new Subject<void>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private commonService = inject(CommonService);
-    private commonService: CommonService,
+  private basicDetailService = inject(BasicDetailService);
-    private basicDetailService: BasicDetailService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private errorHandler: ApiErrorHandlerService
+
-  ) {
+  constructor() {
     this.basicDetailsForm = this.createForm();
   }
 

src/app/service-provider/basic-fee/basic-fee.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, Output, ViewChild } from '@angular/core';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
@@ -6,8 +6,6 @@ import { BasicFee } from '../../core/models/service-provider/basic-fee';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { MatDialog } from '@angular/material/dialog';
-import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/confirm-dialog.component';
 import { CustomPaginator } from '../../shared/custom-paginator';
 import { forkJoin } from 'rxjs';
 import { UserPreferences } from '../../core/models/user-preference';
@@ -44,13 +42,12 @@ export class BasicFeeComponent {
   @Input() spid: number = 0;
   @Output() hasBasicFees = new EventEmitter<boolean>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private basicFeeService = inject(BasicFeeService);
-    private basicFeeService: BasicFeeService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private dialog: MatDialog,
+
-    private errorHandler: ApiErrorHandlerService
+  constructor() {
-  ) {
     this.feeForm = this.fb.group({
       startCarnetValue: [0, [Validators.required, Validators.min(0)]],
       endCarnetValue: [null, [Validators.min(0)]],

src/app/service-provider/carnet-fee/carnet-fee.component.ts

@@ -1,11 +1,9 @@
 
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/confirm-dialog.component';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
 import { CustomPaginator } from '../../shared/custom-paginator';
@@ -48,14 +46,13 @@ export class CarnetFeeComponent implements OnInit {
   @Input() spid: number = 0;
   @Output() hasFeeCommissions = new EventEmitter<boolean>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private feeCommissionService = inject(CarnetFeeService);
-    private feeCommissionService: CarnetFeeService,
+  private commonService = inject(CommonService);
-    private commonService: CommonService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private dialog: MatDialog,
+
-    private errorHandler: ApiErrorHandlerService
+  constructor() {
-  ) {
     this.feeCommissionForm = this.fb.group({
       feeType: ['', Validators.required],
       commissionRate: [0, [Validators.required]],

src/app/service-provider/carnet-sequence/carnet-sequence.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { CarnetSequence } from '../../core/models/service-provider/carnet-sequence';
 import { Subject, takeUntil } from 'rxjs';
@@ -8,8 +8,6 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
-import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/confirm-dialog.component';
-import { MatDialog } from '@angular/material/dialog';
 import { CustomPaginator } from '../../shared/custom-paginator';
 import { UserPreferences } from '../../core/models/user-preference';
 import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
@@ -50,14 +48,13 @@ export class CarnetSequenceComponent implements OnInit {
   sequences: CarnetSequence[] = [];
   regions: Region[] = [];
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private carnetSequenceService = inject(CarnetSequenceService);
-    private carnetSequenceService: CarnetSequenceService,
+  private commonService = inject(CommonService);
-    private notificationService: NotificationService,
+  private notificationService = inject(NotificationService);
-    private commonService: CommonService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private dialog: MatDialog,
+
-    private errorHandler: ApiErrorHandlerService
+  constructor() {
-  ) {
     this.sequenceForm = this.fb.group({
       carnetType: ['ORIGINAL', Validators.required],
       region: ['', Validators.required],

src/app/service-provider/contacts/contacts.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
@@ -45,13 +45,13 @@ export class ContactsComponent implements OnInit {
   @Input() userPreferences: UserPreferences = {};
   @Output() hasContacts = new EventEmitter<boolean>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private contactService = inject(ContactService);
-    private contactService: ContactService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private dialog: MatDialog,
+  private dialog = inject(MatDialog);
-    private errorHandler: ApiErrorHandlerService
+
-  ) {
+  constructor() {
     this.contactForm = this.fb.group({
       firstName: ['', [Validators.required, Validators.maxLength(50)]],
       lastName: ['', [Validators.required, Validators.maxLength(50)]],

src/app/service-provider/continuation-sheet-fee/continuation-sheet-fee.component.ts

@@ -1,10 +1,8 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/confirm-dialog.component';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
 import { of } from 'rxjs';
@@ -55,13 +53,12 @@ export class ContinuationSheetFeeComponent implements OnInit {
   @Input() userPreferences!: UserPreferences;
   @Output() hasContinuationSheetFee = new EventEmitter<boolean>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private continuationSheetFeeService = inject(ContinuationSheetFeeService);
-    private continuationSheetFeeService: ContinuationSheetFeeService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private dialog: MatDialog,
+
-    private errorHandler: ApiErrorHandlerService
+  constructor() {
-  ) {
     this.continuationSheetForm = this.fb.group({
       customerType: ['PREPARER', Validators.required],
       carnetType: ['ORIGINAL', Validators.required],

src/app/service-provider/counterfoil-fee/counterfoil-fee.component.ts

@@ -1,10 +1,8 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/confirm-dialog.component';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
 import { CounterfoilFee } from '../../core/models/service-provider/counterfoil-fee';
@@ -55,13 +53,12 @@ export class CounterfoilFeeComponent implements OnInit {
   @Input() userPreferences!: UserPreferences;
   @Output() hasCounterFoilFee = new EventEmitter<boolean>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private counterfoilFeeService = inject(CounterfoilFeeService);
-    private counterfoilFeeService: CounterfoilFeeService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private dialog: MatDialog,
+
-    private errorHandler: ApiErrorHandlerService
+  constructor() {
-  ) {
     this.counterfoilForm = this.fb.group({
       customerType: ['PREPARER', Validators.required],
       carnetType: ['ORIGINAL', Validators.required],

src/app/service-provider/edit/edit-service-provider.component.ts

@@ -1,4 +1,4 @@
-import { afterNextRender, Component, viewChild } from '@angular/core';
+import { afterNextRender, Component, inject, viewChild } from '@angular/core';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { MatAccordion } from '@angular/material/expansion';
 import { BasicDetailsComponent } from '../basic-details/basic-details.component';
@@ -28,7 +28,9 @@ export class EditServiceProviderComponent {
   serviceProviderName: string | null = null;
   userPreferences: UserPreferences;
 
-  constructor(private route: ActivatedRoute, private userPrefenceService: UserPreferencesService) {
+  private route = inject(ActivatedRoute);
+
+  constructor(userPrefenceService: UserPreferencesService) {
     this.userPreferences = userPrefenceService.getPreferences();
     afterNextRender(() => {
       // Open all panels

src/app/service-provider/expedited-fee/expedited-fee.component.ts

@@ -1,10 +1,8 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/confirm-dialog.component';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
 import { CustomPaginator } from '../../shared/custom-paginator';
@@ -58,15 +56,14 @@ export class ExpeditedFeeComponent implements OnInit, OnDestroy {
   deliveryTypes: DeliveryType[] = [];
   timeZones: TimeZone[] = [];
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private expeditedFeeService = inject(ExpeditedFeeService);
-    private expeditedFeeService: ExpeditedFeeService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private commonService: CommonService,
+  private commonService = inject(CommonService);
-    private dialog: MatDialog,
+  private timeFormatHelper = inject(TimeFormatService);
-    private errorHandler: ApiErrorHandlerService,
+
-    private timeFormatHelper: TimeFormatService
+  constructor() {
-  ) {
     this.feeForm = this.fb.group({
       customerType: ['PREPARER', Validators.required],
       deliveryType: ['', Validators.required],

src/app/service-provider/security-deposit/security-deposit.component.ts

@@ -1,10 +1,8 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/confirm-dialog.component';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
 import { CustomPaginator } from '../../shared/custom-paginator';
@@ -58,14 +56,13 @@ export class SecurityDepositComponent implements OnInit {
     { value: 'N', label: 'No' }
   ];
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private securityDepositService = inject(SecurityDepositService);
-    private securityDepositService: SecurityDepositService,
+  private notificationService = inject(NotificationService);
-    private commonService: CommonService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private notificationService: NotificationService,
+  private commonService = inject(CommonService);
-    private dialog: MatDialog,
+
-    private errorHandler: ApiErrorHandlerService
+  constructor() {
-  ) {
     this.depositForm = this.fb.group({
       holderType: ['CORP', Validators.required],
       uscibMember: ['Y', Validators.required],

src/app/user-settings/user-settings.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { UserPreferences } from '../core/models/user-preference';
 import { AngularMaterialModule } from '../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
@@ -19,11 +19,11 @@ export class UserSettingsComponent implements OnInit {
   userPreferencesForm: FormGroup;
   isLoading = true;
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private preferencesService = inject(UserPreferencesService);
-    private preferencesService: UserPreferencesService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService
+
-  ) {
+  constructor() {
     this.userPreferencesForm = this.fb.group({
       pageSize: ['']
     });