Chore: update to Angular 20 (#10273)

src-ui/angular.json

@@ -60,10 +60,12 @@
                 "path": "./extra-webpack.config.ts"
             },
             "outputPath": "dist/paperless-ui",
+            "main": "src/main.ts",
             "outputHashing": "none",
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "polyfills": [
-            "polyfills": "src/polyfills.ts",
+              "src/polyfills.ts"
+            ],
             "tsConfig": "tsconfig.app.json",
             "localize": true,
             "assets": [
@@ -86,12 +88,15 @@
               "file-saver",
               "utif"
             ],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "."
+              ]
+            }
           },
           "configurations": {
             "production": {
@@ -107,8 +112,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -188,6 +191,30 @@
     },
     "@angular-eslint/schematics:library": {
       "setParserOptionsProject": true
+    },
+    "@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": "."
     }
   }
 }

src-ui/package.json

@@ -11,17 +11,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^19.2.14",
+    "@angular/cdk": "^20.0.4",
-    "@angular/common": "~19.2.14",
+    "@angular/common": "~20.0.5",
-    "@angular/compiler": "~19.2.14",
+    "@angular/compiler": "~20.0.5",
-    "@angular/core": "~19.2.14",
+    "@angular/core": "~20.0.5",
-    "@angular/forms": "~19.2.14",
+    "@angular/forms": "~20.0.5",
-    "@angular/localize": "~19.2.14",
+    "@angular/localize": "~20.0.5",
-    "@angular/platform-browser": "~19.2.14",
+    "@angular/platform-browser": "~20.0.5",
-    "@angular/platform-browser-dynamic": "~19.2.14",
+    "@angular/platform-browser-dynamic": "~20.0.5",
-    "@angular/router": "~19.2.14",
+    "@angular/router": "~20.0.5",
-    "@ng-bootstrap/ng-bootstrap": "^18.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^19.0.0",
-    "@ng-select/ng-select": "^14.9.0",
+    "@ng-select/ng-select": "^15.1.2",
     "@ngneat/dirty-check-forms": "^3.0.3",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.6",
@@ -32,7 +32,7 @@
     "ngx-color": "^10.0.0",
     "ngx-cookie-service": "^19.1.2",
     "ngx-device-detector": "^9.0.0",
-    "ngx-ui-tour-ng-bootstrap": "^16.0.0",
+    "ngx-ui-tour-ng-bootstrap": "^17.0.0",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "utif": "^3.1.0",
@@ -40,25 +40,25 @@
     "zone.js": "^0.15.1"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^19.0.1",
+    "@angular-builders/custom-webpack": "^20.0.0",
-    "@angular-builders/jest": "^19.0.1",
+    "@angular-builders/jest": "^20.0.0",
-    "@angular-devkit/build-angular": "^19.2.14",
+    "@angular-devkit/core": "^20.0.4",
-    "@angular-devkit/core": "^19.2.14",
+    "@angular-devkit/schematics": "^20.0.4",
-    "@angular-devkit/schematics": "^19.2.14",
+    "@angular-eslint/builder": "20.1.1",
-    "@angular-eslint/builder": "19.7.0",
+    "@angular-eslint/eslint-plugin": "20.1.1",
-    "@angular-eslint/eslint-plugin": "19.7.0",
+    "@angular-eslint/eslint-plugin-template": "20.1.1",
-    "@angular-eslint/eslint-plugin-template": "19.7.0",
+    "@angular-eslint/schematics": "20.1.1",
-    "@angular-eslint/schematics": "19.7.0",
+    "@angular-eslint/template-parser": "20.1.1",
-    "@angular-eslint/template-parser": "19.7.0",
+    "@angular/build": "^20.0.4",
-    "@angular/cli": "~19.2.14",
+    "@angular/cli": "~20.0.4",
-    "@angular/compiler-cli": "~19.2.14",
+    "@angular/compiler-cli": "~20.0.5",
     "@codecov/webpack-plugin": "^1.9.1",
     "@playwright/test": "^1.51.1",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.15.29",
-    "@typescript-eslint/eslint-plugin": "^8.33.0",
+    "@typescript-eslint/eslint-plugin": "^8.33.1",
-    "@typescript-eslint/parser": "^8.33.0",
+    "@typescript-eslint/parser": "^8.33.1",
-    "@typescript-eslint/utils": "^8.33.0",
+    "@typescript-eslint/utils": "^8.33.1",
     "eslint": "^9.28.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -67,7 +67,7 @@
     "jest-websocket-mock": "^2.5.0",
     "prettier-plugin-organize-imports": "^4.1.0",
     "ts-node": "~10.9.1",
-    "typescript": "^5.5.4",
+    "typescript": "^5.8.3",
     "webpack": "^5.98.0"
   },
   "pnpm": {
@@ -78,6 +78,5 @@
       "lmdb",
       "msgpackr-extract"
     ]
-  },
+  }
-  "typings": "./src/typings.d.ts"
 }

src-ui/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+import { Component, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core'
 import { Router, RouterOutlet } from '@angular/router'
 import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
 import { first, Subscription } from 'rxjs'
@@ -29,22 +29,22 @@ import { WebsocketStatusService } from './services/websocket-status.service'
   ],
 })
 export class AppComponent implements OnInit, OnDestroy {
+  private settings = inject(SettingsService)
+  private websocketStatusService = inject(WebsocketStatusService)
+  private toastService = inject(ToastService)
+  private router = inject(Router)
+  private tasksService = inject(TasksService)
+  tourService = inject(TourService)
+  private renderer = inject(Renderer2)
+  private permissionsService = inject(PermissionsService)
+  private hotKeyService = inject(HotKeyService)
+  private componentRouterService = inject(ComponentRouterService)
+
   newDocumentSubscription: Subscription
   successSubscription: Subscription
   failedSubscription: Subscription
 
-  constructor(
+  constructor() {
-    private settings: SettingsService,
-    private websocketStatusService: WebsocketStatusService,
-    private toastService: ToastService,
-    private router: Router,
-    private tasksService: TasksService,
-    public tourService: TourService,
-    private renderer: Renderer2,
-    private permissionsService: PermissionsService,
-    private hotKeyService: HotKeyService,
-    private componentRouterService: ComponentRouterService
-  ) {
     let anyWindow = window as any
     anyWindow.pdfWorkerSrc = 'assets/js/pdf.worker.min.mjs'
     this.settings.updateAppearanceSettings()

src-ui/src/app/components/admin/config/config.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common'
-import { Component, OnDestroy, OnInit } from '@angular/core'
+import { Component, OnDestroy, OnInit, inject } from '@angular/core'
 import {
   AbstractControl,
   FormControl,
@@ -57,6 +57,10 @@ export class ConfigComponent
   extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy, DirtyComponent
 {
+  private configService = inject(ConfigService)
+  private toastService = inject(ToastService)
+  private settingsService = inject(SettingsService)
+
   public readonly ConfigOptionType = ConfigOptionType
 
   // generated dynamically
@@ -77,11 +81,7 @@ export class ConfigComponent
   storeSub: Subscription
   isDirty$: Observable<boolean>
 
-  constructor(
+  constructor() {
-    private configService: ConfigService,
-    private toastService: ToastService,
-    private settingsService: SettingsService
-  ) {
     super()
     this.configForm.addControl('id', new FormControl())
     PaperlessConfigOptions.forEach((option) => {

src-ui/src/app/components/admin/logs/logs.component.ts

@@ -5,6 +5,7 @@ import {
   OnDestroy,
   OnInit,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
@@ -28,12 +29,8 @@ export class LogsComponent
   extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  constructor(
+  private logService = inject(LogService)
-    private logService: LogService,
+  private changedetectorRef = inject(ChangeDetectorRef)
-    private changedetectorRef: ChangeDetectorRef
-  ) {
-    super()
-  }
 
   public logs: string[] = []
 

src-ui/src/app/components/admin/settings/settings.component.ts

@@ -2,10 +2,10 @@ import { AsyncPipe, ViewportScroller } from '@angular/common'
 import {
   AfterViewInit,
   Component,
-  Inject,
   LOCALE_ID,
   OnDestroy,
   OnInit,
+  inject,
 } from '@angular/core'
 import {
   FormControl,
@@ -104,6 +104,20 @@ export class SettingsComponent
   extends ComponentWithPermissions
   implements OnInit, AfterViewInit, OnDestroy, DirtyComponent
 {
+  private documentListViewService = inject(DocumentListViewService)
+  private toastService = inject(ToastService)
+  private settings = inject(SettingsService)
+  currentLocale = inject(LOCALE_ID)
+  private viewportScroller = inject(ViewportScroller)
+  private activatedRoute = inject(ActivatedRoute)
+  readonly tourService = inject(TourService)
+  private usersService = inject(UserService)
+  private groupsService = inject(GroupService)
+  private router = inject(Router)
+  permissionsService = inject(PermissionsService)
+  private modalService = inject(NgbModal)
+  private systemStatusService = inject(SystemStatusService)
+
   activeNavID: number
 
   settingsForm = new FormGroup({
@@ -179,21 +193,7 @@ export class SettingsComponent
     )
   }
 
-  constructor(
+  constructor() {
-    private documentListViewService: DocumentListViewService,
-    private toastService: ToastService,
-    private settings: SettingsService,
-    @Inject(LOCALE_ID) public currentLocale: string,
-    private viewportScroller: ViewportScroller,
-    private activatedRoute: ActivatedRoute,
-    public readonly tourService: TourService,
-    private usersService: UserService,
-    private groupsService: GroupService,
-    private router: Router,
-    public permissionsService: PermissionsService,
-    private modalService: NgbModal,
-    private systemStatusService: SystemStatusService
-  ) {
     super()
     this.settings.settingsSaved.subscribe(() => {
       if (!this.savePending) this.initialize()

src-ui/src/app/components/admin/tasks/tasks.component.ts

@@ -1,5 +1,5 @@
 import { NgTemplateOutlet, SlicePipe } from '@angular/common'
-import { Component, OnDestroy, OnInit } from '@angular/core'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
 import {
@@ -69,6 +69,10 @@ export class TasksComponent
   extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy
 {
+  tasksService = inject(TasksService)
+  private modalService = inject(NgbModal)
+  private readonly router = inject(Router)
+
   public activeTab: TaskTab
   public selectedTasks: Set<number> = new Set()
   public togggleAll: boolean = false
@@ -105,14 +109,6 @@ export class TasksComponent
       : $localize`Dismiss all`
   }
 
-  constructor(
-    public tasksService: TasksService,
-    private modalService: NgbModal,
-    private readonly router: Router
-  ) {
-    super()
-  }
-
   ngOnInit() {
     this.tasksService.reload()
     timer(5000, 5000)

src-ui/src/app/components/admin/trash/trash.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from '@angular/core'
+import { Component, OnDestroy, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
 import {
@@ -36,19 +36,19 @@ export class TrashComponent
   extends LoadingComponentWithPermissions
   implements OnDestroy
 {
+  private trashService = inject(TrashService)
+  private toastService = inject(ToastService)
+  private modalService = inject(NgbModal)
+  private settingsService = inject(SettingsService)
+  private router = inject(Router)
+
   public documentsInTrash: Document[] = []
   public selectedDocuments: Set<number> = new Set()
   public allToggled: boolean = false
   public page: number = 1
   public totalDocuments: number
 
-  constructor(
+  constructor() {
-    private trashService: TrashService,
-    private toastService: ToastService,
-    private modalService: NgbModal,
-    private settingsService: SettingsService,
-    private router: Router
-  ) {
     super()
     this.reload()
   }

src-ui/src/app/components/admin/users-groups/users-groups.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core'
+import { Component, OnDestroy, OnInit, inject } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, first, takeUntil } from 'rxjs'
@@ -31,22 +31,18 @@ export class UsersAndGroupsComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy
 {
+  private usersService = inject(UserService)
+  private groupsService = inject(GroupService)
+  private toastService = inject(ToastService)
+  private modalService = inject(NgbModal)
+  permissionsService = inject(PermissionsService)
+  private settings = inject(SettingsService)
+
   users: User[]
   groups: Group[]
 
   unsubscribeNotifier: Subject<any> = new Subject()
 
-  constructor(
-    private usersService: UserService,
-    private groupsService: GroupService,
-    private toastService: ToastService,
-    private modalService: NgbModal,
-    public permissionsService: PermissionsService,
-    private settings: SettingsService
-  ) {
-    super()
-  }
-
   ngOnInit(): void {
     this.usersService
       .listAll(null, null, { full_perms: true })

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -6,7 +6,7 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { NgClass } from '@angular/common'
-import { Component, HostListener, OnInit } from '@angular/core'
+import { Component, HostListener, inject, OnInit } from '@angular/core'
 import { ActivatedRoute, Router, RouterModule } from '@angular/router'
 import {
   NgbCollapseModule,
@@ -74,26 +74,27 @@ export class AppFrameComponent
   extends ComponentWithPermissions
   implements OnInit, ComponentCanDeactivate
 {
+  router = inject(Router)
+  private activatedRoute = inject(ActivatedRoute)
+  private openDocumentsService = inject(OpenDocumentsService)
+  savedViewService = inject(SavedViewService)
+  private remoteVersionService = inject(RemoteVersionService)
+  settingsService = inject(SettingsService)
+  tasksService = inject(TasksService)
+  private readonly toastService = inject(ToastService)
+  private modalService = inject(NgbModal)
+  permissionsService = inject(PermissionsService)
+  private djangoMessagesService = inject(DjangoMessagesService)
+
   appRemoteVersion: AppRemoteVersion
 
   isMenuCollapsed: boolean = true
 
   slimSidebarAnimating: boolean = false
 
-  constructor(
+  constructor() {
-    public router: Router,
-    private activatedRoute: ActivatedRoute,
-    private openDocumentsService: OpenDocumentsService,
-    public savedViewService: SavedViewService,
-    private remoteVersionService: RemoteVersionService,
-    public settingsService: SettingsService,
-    public tasksService: TasksService,
-    private readonly toastService: ToastService,
-    private modalService: NgbModal,
-    public permissionsService: PermissionsService,
-    private djangoMessagesService: DjangoMessagesService
-  ) {
     super()
+    const permissionsService = this.permissionsService
 
     if (
       permissionsService.currentUserCan(

src-ui/src/app/components/app-frame/global-search/global-search.component.ts

@@ -6,6 +6,7 @@ import {
   QueryList,
   ViewChild,
   ViewChildren,
+  inject,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
@@ -69,6 +70,17 @@ import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-e
   ],
 })
 export class GlobalSearchComponent implements OnInit {
+  searchService = inject(SearchService)
+  private router = inject(Router)
+  private modalService = inject(NgbModal)
+  private documentService = inject(DocumentService)
+  private documentListViewService = inject(DocumentListViewService)
+  private permissionsService = inject(PermissionsService)
+  private toastService = inject(ToastService)
+  private hotkeyService = inject(HotKeyService)
+  private settingsService = inject(SettingsService)
+  private locationStrategy = inject(LocationStrategy)
+
   public DataType = DataType
   public query: string
   public queryDebounce: Subject<string>
@@ -90,18 +102,7 @@ export class GlobalSearchComponent implements OnInit {
     )
   }
 
-  constructor(
+  constructor() {
-    public searchService: SearchService,
-    private router: Router,
-    private modalService: NgbModal,
-    private documentService: DocumentService,
-    private documentListViewService: DocumentListViewService,
-    private permissionsService: PermissionsService,
-    private toastService: ToastService,
-    private hotkeyService: HotKeyService,
-    private settingsService: SettingsService,
-    private locationStrategy: LocationStrategy
-  ) {
     this.queryDebounce = new Subject<string>()
 
     this.queryDebounce

src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core'
+import { Component, OnDestroy, OnInit, inject } from '@angular/core'
 import {
   NgbDropdownModule,
   NgbProgressbarModule,
@@ -20,7 +20,7 @@ import { ToastComponent } from '../../common/toast/toast.component'
   ],
 })
 export class ToastsDropdownComponent implements OnInit, OnDestroy {
-  constructor(public toastService: ToastService) {}
+  toastService = inject(ToastService)
 
   private subscription: Subscription
 

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts

@@ -1,5 +1,5 @@
 import { DecimalPipe } from '@angular/common'
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subject } from 'rxjs'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
@@ -12,9 +12,7 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
   imports: [DecimalPipe, SafeHtmlPipe],
 })
 export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
-  constructor(public activeModal: NgbActiveModal) {
+  activeModal = inject(NgbActiveModal)
-    super()
-  }
 
   @Output()
   public confirmClicked = new EventEmitter()

src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.ts

@@ -1,6 +1,5 @@
-import { Component, TemplateRef, ViewChild } from '@angular/core'
+import { Component, TemplateRef, ViewChild, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import {
   PDFDocumentProxy,
   PdfViewerComponent,
@@ -17,6 +16,8 @@ import { ConfirmDialogComponent } from '../confirm-dialog.component'
   imports: [PdfViewerModule, FormsModule, ReactiveFormsModule, SafeHtmlPipe],
 })
 export class DeletePagesConfirmDialogComponent extends ConfirmDialogComponent {
+  private documentService = inject(DocumentService)
+
   public documentID: number
   public pages: number[] = []
   public currentPage: number = 1
@@ -34,11 +35,8 @@ export class DeletePagesConfirmDialogComponent extends ConfirmDialogComponent {
     return this.documentService.getPreviewUrl(this.documentID)
   }
 
-  constructor(
+  constructor() {
-    activeModal: NgbActiveModal,
+    super()
-    private documentService: DocumentService
-  ) {
-    super(activeModal)
   }
 
   public pdfPreviewLoaded(pdf: PDFDocumentProxy) {

src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.ts

@@ -3,9 +3,8 @@ import {
   DragDropModule,
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil } from 'rxjs'
 import { Document } from 'src/app/data/document'
@@ -28,6 +27,9 @@ export class MergeConfirmDialogComponent
   extends ConfirmDialogComponent
   implements OnInit
 {
+  private documentService = inject(DocumentService)
+  private permissionService = inject(PermissionsService)
+
   public documentIDs: number[] = []
   public archiveFallback: boolean = false
   public deleteOriginals: boolean = false
@@ -38,12 +40,8 @@ export class MergeConfirmDialogComponent
 
   public metadataDocumentID: number = -1
 
-  constructor(
+  constructor() {
-    activeModal: NgbActiveModal,
+    super()
-    private documentService: DocumentService,
-    private permissionService: PermissionsService
-  ) {
-    super(activeModal)
   }
 
   ngOnInit() {

src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.ts

@@ -1,6 +1,5 @@
 import { NgStyle } from '@angular/common'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { DocumentService } from 'src/app/services/rest/document.service'
@@ -13,6 +12,8 @@ import { ConfirmDialogComponent } from '../confirm-dialog.component'
   imports: [NgStyle, NgxBootstrapIconsModule, SafeHtmlPipe],
 })
 export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
+  documentService = inject(DocumentService)
+
   public documentID: number
   public showPDFNote: boolean = true
 
@@ -25,11 +26,8 @@ export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
     return degrees
   }
 
-  constructor(
+  constructor() {
-    activeModal: NgbActiveModal,
+    super()
-    public documentService: DocumentService
-  ) {
-    super(activeModal)
   }
 
   rotate(clockwise: boolean = true) {

src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.ts

@@ -1,6 +1,5 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { PDFDocumentProxy, PdfViewerModule } from 'ng2-pdf-viewer'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Document } from 'src/app/data/document'
@@ -23,6 +22,9 @@ export class SplitConfirmDialogComponent
   extends ConfirmDialogComponent
   implements OnInit
 {
+  private documentService = inject(DocumentService)
+  private permissionService = inject(PermissionsService)
+
   public get pagesString(): string {
     let pagesStr = ''
 
@@ -62,12 +64,8 @@ export class SplitConfirmDialogComponent
     return this.documentService.getPreviewUrl(this.documentID)
   }
 
-  constructor(
+  constructor() {
-    activeModal: NgbActiveModal,
+    super()
-    private documentService: DocumentService,
-    private permissionService: PermissionsService
-  ) {
-    super(activeModal)
     this.confirmButtonEnabled = this.pages.size > 0
   }
 

src-ui/src/app/components/common/custom-field-display/custom-field-display.component.ts

@@ -1,5 +1,5 @@
 import { CurrencyPipe, getLocaleCurrencyCode } from '@angular/common'
-import { Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'
+import { Component, Input, LOCALE_ID, OnInit, inject } from '@angular/core'
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 import { takeUntil } from 'rxjs'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
@@ -20,6 +20,9 @@ export class CustomFieldDisplayComponent
   extends LoadingComponentWithPermissions
   implements OnInit
 {
+  private customFieldService = inject(CustomFieldsService)
+  private documentService = inject(DocumentService)
+
   CustomFieldDataType = CustomFieldDataType
 
   private _document: Document
@@ -63,11 +66,9 @@ export class CustomFieldDisplayComponent
 
   private defaultCurrencyCode: any
 
-  constructor(
+  constructor() {
-    private customFieldService: CustomFieldsService,
+    const currentLocale = inject(LOCALE_ID)
-    private documentService: DocumentService,
+
-    @Inject(LOCALE_ID) currentLocale: string
-  ) {
     super()
     this.defaultCurrencyCode = getLocaleCurrencyCode(currentLocale)
     this.customFieldService.listAll().subscribe((r) => {

src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts

@@ -7,6 +7,7 @@ import {
   QueryList,
   ViewChild,
   ViewChildren,
+  inject,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
@@ -37,6 +38,11 @@ import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit
   ],
 })
 export class CustomFieldsDropdownComponent extends LoadingComponentWithPermissions {
+  private customFieldsService = inject(CustomFieldsService)
+  private modalService = inject(NgbModal)
+  private toastService = inject(ToastService)
+  private permissionsService = inject(PermissionsService)
+
   public popperOptions = pngxPopperOptions
 
   @Input()
@@ -78,12 +84,7 @@ export class CustomFieldsDropdownComponent extends LoadingComponentWithPermissio
     )
   }
 
-  constructor(
+  constructor() {
-    private customFieldsService: CustomFieldsService,
-    private modalService: NgbModal,
-    private toastService: ToastService,
-    private permissionsService: PermissionsService
-  ) {
     super()
     this.getFields()
   }

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts

@@ -2,6 +2,7 @@ import { NgTemplateOutlet } from '@angular/common'
 import {
   Component,
   EventEmitter,
+  inject,
   Input,
   Output,
   QueryList,
@@ -178,6 +179,8 @@ export class CustomFieldQueriesModel {
   ],
 })
 export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPermissions {
+  protected customFieldsService = inject(CustomFieldsService)
+
   public CustomFieldQueryComponentType = CustomFieldQueryElementType
   public CustomFieldQueryOperator = CustomFieldQueryOperator
   public CustomFieldDataType = CustomFieldDataType
@@ -245,7 +248,7 @@ export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPerm
 
   public readonly today: string = new Date().toISOString().split('T')[0]
 
-  constructor(protected customFieldsService: CustomFieldsService) {
+  constructor() {
     super()
     this.selectionModel = new CustomFieldQueriesModel()
     this.getFields()

src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts

@@ -6,6 +6,7 @@ import {
   OnDestroy,
   OnInit,
   Output,
+  inject,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
@@ -63,7 +64,9 @@ export enum RelativeDate {
 export class DatesDropdownComponent implements OnInit, OnDestroy {
   public popperOptions = pngxPopperOptions
 
-  constructor(settings: SettingsService) {
+  constructor() {
+    const settings = inject(SettingsService)
+
     this.datePlaceHolder = settings.getLocalizedDateInputFormat()
   }
 

src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html

@@ -13,8 +13,6 @@
     <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
     @if (patternRequired) {
       <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
-    }
-    @if (patternRequired) {
       <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive" novalidate></pngx-input-check>
     }
 

src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.ts

@@ -1,11 +1,10 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { Correspondent } from 'src/app/data/correspondent'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
@@ -13,6 +12,7 @@ import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { CheckComponent } from '../../input/check/check.component'
 import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
 import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
@@ -22,6 +22,7 @@ import { TextComponent } from '../../input/text/text.component'
   templateUrl: './correspondent-edit-dialog.component.html',
   styleUrls: ['./correspondent-edit-dialog.component.scss'],
   imports: [
+    CheckComponent,
     SelectComponent,
     PermissionsFormComponent,
     TextComponent,
@@ -31,13 +32,11 @@ import { TextComponent } from '../../input/text/text.component'
   ],
 })
 export class CorrespondentEditDialogComponent extends EditDialogComponent<Correspondent> {
-  constructor(
+  constructor() {
-    service: CorrespondentService,
+    super()
-    activeModal: NgbActiveModal,
+    this.service = inject(CorrespondentService)
-    userService: UserService,
+    this.userService = inject(UserService)
-    settingsService: SettingsService
+    this.settingsService = inject(SettingsService)
-  ) {
-    super(service, activeModal, userService, settingsService)
   }
 
   getCreateTitle() {

src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts

@@ -5,6 +5,7 @@ import {
   OnInit,
   QueryList,
   ViewChildren,
+  inject,
 } from '@angular/core'
 import {
   FormArray,
@@ -13,7 +14,6 @@ import {
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil } from 'rxjs'
 import {
@@ -54,13 +54,11 @@ export class CustomFieldEditDialogComponent
       .select_options as FormArray
   }
 
-  constructor(
+  constructor() {
-    service: CustomFieldsService,
+    super()
-    activeModal: NgbActiveModal,
+    this.service = inject(CustomFieldsService)
-    userService: UserService,
+    this.userService = inject(UserService)
-    settingsService: SettingsService
+    this.settingsService = inject(SettingsService)
-  ) {
-    super(service, activeModal, userService, settingsService)
   }
 
   ngOnInit(): void {

src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html

@@ -14,8 +14,6 @@
       <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
       @if (patternRequired) {
         <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
-      }
-      @if (patternRequired) {
         <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
       }
     </div>

src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.ts

@@ -1,11 +1,10 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { DocumentType } from 'src/app/data/document-type'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
@@ -13,6 +12,7 @@ import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { CheckComponent } from '../../input/check/check.component'
 import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
 import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
@@ -22,6 +22,7 @@ import { TextComponent } from '../../input/text/text.component'
   templateUrl: './document-type-edit-dialog.component.html',
   styleUrls: ['./document-type-edit-dialog.component.scss'],
   imports: [
+    CheckComponent,
     SelectComponent,
     PermissionsFormComponent,
     TextComponent,
@@ -31,13 +32,11 @@ import { TextComponent } from '../../input/text/text.component'
   ],
 })
 export class DocumentTypeEditDialogComponent extends EditDialogComponent<DocumentType> {
-  constructor(
+  constructor() {
-    service: DocumentTypeService,
+    super()
-    activeModal: NgbActiveModal,
+    this.service = inject(DocumentTypeService)
-    userService: UserService,
+    this.userService = inject(UserService)
-    settingsService: SettingsService
+    this.settingsService = inject(SettingsService)
-  ) {
-    super(service, activeModal, userService, settingsService)
   }
 
   getCreateTitle() {

src-ui/src/app/components/common/edit-dialog/edit-dialog.component.spec.ts

@@ -41,13 +41,9 @@ import { EditDialogComponent, EditDialogMode } from './edit-dialog.component'
   imports: [FormsModule, ReactiveFormsModule],
 })
 class TestComponent extends EditDialogComponent<Tag> {
-  constructor(
+  constructor() {
-    service: TagService,
+    super()
-    activeModal: NgbActiveModal,
+    this.service = TestBed.inject(TagService)
-    userService: UserService,
-    settingsService: SettingsService
-  ) {
-    super(service, activeModal, userService, settingsService)
   }
 
   getForm(): FormGroup<any> {

src-ui/src/app/components/common/edit-dialog/edit-dialog.component.ts

@@ -1,4 +1,11 @@
-import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import {
+  Directive,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  inject,
+} from '@angular/core'
 import { FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { Observable } from 'rxjs'
@@ -29,14 +36,12 @@ export abstract class EditDialogComponent<
   extends LoadingComponentWithPermissions
   implements OnInit
 {
-  constructor(
+  protected service = inject<AbstractPaperlessService<T>>(
-    protected service: AbstractPaperlessService<T>,
+    AbstractPaperlessService
-    private activeModal: NgbActiveModal,
+  )
-    private userService: UserService,
+  protected activeModal = inject(NgbActiveModal)
-    protected settingsService: SettingsService
+  protected userService = inject(UserService)
-  ) {
+  protected settingsService = inject(SettingsService)
-    super()
-  }
 
   users: User[]
 

src-ui/src/app/components/common/edit-dialog/group-edit-dialog/group-edit-dialog.component.ts

@@ -1,11 +1,10 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { Group } from 'src/app/data/group'
 import { GroupService } from 'src/app/services/rest/group.service'
@@ -26,13 +25,11 @@ import { PermissionsSelectComponent } from '../../permissions-select/permissions
   ],
 })
 export class GroupEditDialogComponent extends EditDialogComponent<Group> {
-  constructor(
+  constructor() {
-    service: GroupService,
+    super()
-    activeModal: NgbActiveModal,
+    this.service = inject(GroupService)
-    userService: UserService,
+    this.userService = inject(UserService)
-    settingsService: SettingsService
+    this.settingsService = inject(SettingsService)
-  ) {
-    super(service, activeModal, userService, settingsService)
   }
 
   getCreateTitle() {

src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.ts

@@ -1,15 +1,11 @@
-import { Component, ViewChild } from '@angular/core'
+import { Component, ViewChild, inject } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import {
+import { NgbAlert, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap'
-  NgbActiveModal,
-  NgbAlert,
-  NgbAlertModule,
-} from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { IMAPSecurity, MailAccount } from 'src/app/data/mail-account'
 import { MailAccountService } from 'src/app/services/rest/mail-account.service'
@@ -47,13 +43,11 @@ export class MailAccountEditDialogComponent extends EditDialogComponent<MailAcco
 
   @ViewChild('testResultAlert', { static: false }) testResultAlert: NgbAlert
 
-  constructor(
+  constructor() {
-    service: MailAccountService,
+    super()
-    activeModal: NgbActiveModal,
+    this.service = inject(MailAccountService)
-    userService: UserService,
+    this.userService = inject(UserService)
-    settingsService: SettingsService
+    this.settingsService = inject(SettingsService)
-  ) {
-    super(service, activeModal, userService, settingsService)
   }
 
   getCreateTitle() {

src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.ts

@@ -1,11 +1,10 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { first } from 'rxjs'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { Correspondent } from 'src/app/data/correspondent'
@@ -155,32 +154,34 @@ const METADATA_CORRESPONDENT_OPTIONS = [
   ],
 })
 export class MailRuleEditDialogComponent extends EditDialogComponent<MailRule> {
+  private accountService: MailAccountService
+  private correspondentService: CorrespondentService
+  private documentTypeService: DocumentTypeService
+
   accounts: MailAccount[]
   correspondents: Correspondent[]
   documentTypes: DocumentType[]
 
-  constructor(
+  constructor() {
-    service: MailRuleService,
+    super()
-    activeModal: NgbActiveModal,
+    this.service = inject(MailRuleService)
-    accountService: MailAccountService,
+    this.accountService = inject(MailAccountService)
-    correspondentService: CorrespondentService,
+    this.correspondentService = inject(CorrespondentService)
-    documentTypeService: DocumentTypeService,
+    this.documentTypeService = inject(DocumentTypeService)
-    userService: UserService,
+    this.userService = inject(UserService)
-    settingsService: SettingsService
+    this.settingsService = inject(SettingsService)
-  ) {
-    super(service, activeModal, userService, settingsService)
 
-    accountService
+    this.accountService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.accounts = result.results))
 
-    correspondentService
+    this.correspondentService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.correspondents = result.results))
 
-    documentTypeService
+    this.documentTypeService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.documentTypes = result.results))

src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html

@@ -64,8 +64,6 @@
     <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
     @if (patternRequired) {
       <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
-    }
-    @if (patternRequired) {
       <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
     }
 

src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.ts

@@ -1,12 +1,12 @@
 import { AsyncPipe, NgTemplateOutlet } from '@angular/common'
-import { Component, OnDestroy } from '@angular/core'
+import { Component, OnDestroy, inject } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgbAccordionModule, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectComponent } from '@ng-select/ng-select'
 import {
   Observable,
@@ -60,6 +60,8 @@ export class StoragePathEditDialogComponent
   extends EditDialogComponent<StoragePath>
   implements OnDestroy
 {
+  private documentsService = inject(DocumentService)
+
   public documentsInput$ = new Subject<string>()
   public foundDocuments$: Observable<Document[]>
   private testDocument: Document
@@ -68,14 +70,11 @@ export class StoragePathEditDialogComponent
   public loading = false
   public testLoading = false
 
-  constructor(
+  constructor() {
-    service: StoragePathService,
+    super()
-    activeModal: NgbActiveModal,
+    this.service = inject(StoragePathService)
-    userService: UserService,
+    this.userService = inject(UserService)
-    settingsService: SettingsService,
+    this.settingsService = inject(SettingsService)
-    private documentsService: DocumentService
-  ) {
-    super(service, activeModal, userService, settingsService)
     this.initPathObservables()
   }
 

src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html

@@ -16,8 +16,6 @@
     <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
     @if (patternRequired) {
       <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
-    }
-    @if (patternRequired) {
       <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
     }
 

src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.ts

@@ -1,11 +1,10 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
 import { Tag } from 'src/app/data/tag'
@@ -36,13 +35,11 @@ import { TextComponent } from '../../input/text/text.component'
   ],
 })
 export class TagEditDialogComponent extends EditDialogComponent<Tag> {
-  constructor(
+  constructor() {
-    service: TagService,
+    super()
-    activeModal: NgbActiveModal,
+    this.service = inject(TagService)
-    userService: UserService,
+    this.userService = inject(UserService)
-    settingsService: SettingsService
+    this.settingsService = inject(SettingsService)
-  ) {
-    super(service, activeModal, userService, settingsService)
   }
 
   getCreateTitle() {

src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts

@@ -1,11 +1,10 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, inject } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { first } from 'rxjs'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { Group } from 'src/app/data/group'
@@ -37,21 +36,21 @@ export class UserEditDialogComponent
   extends EditDialogComponent<User>
   implements OnInit
 {
+  private toastService = inject(ToastService)
+  private permissionsService = inject(PermissionsService)
+  private groupsService: GroupService
+
   groups: Group[]
   passwordIsSet: boolean = false
   public totpLoading: boolean = false
 
-  constructor(
+  constructor() {
-    service: UserService,
+    super()
-    activeModal: NgbActiveModal,
+    this.service = inject(UserService)
-    groupsService: GroupService,
+    this.groupsService = inject(GroupService)
-    settingsService: SettingsService,
+    this.settingsService = inject(SettingsService)
-    private toastService: ToastService,
-    private permissionsService: PermissionsService
-  ) {
-    super(service, activeModal, service, settingsService)
 
-    groupsService
+    this.groupsService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.groups = result.results))

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts

@@ -4,7 +4,7 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { NgTemplateOutlet } from '@angular/common'
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, inject } from '@angular/core'
 import {
   FormArray,
   FormControl,
@@ -12,7 +12,7 @@ import {
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgbAccordionModule, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first } from 'rxjs'
 import { Correspondent } from 'src/app/data/correspondent'
@@ -171,6 +171,12 @@ export class WorkflowEditDialogComponent
   public WorkflowTriggerType = WorkflowTriggerType
   public WorkflowActionType = WorkflowActionType
 
+  private correspondentService: CorrespondentService
+  private documentTypeService: DocumentTypeService
+  private storagePathService: StoragePathService
+  private mailRuleService: MailRuleService
+  private customFieldsService: CustomFieldsService
+
   templates: Workflow[]
   correspondents: Correspondent[]
   documentTypes: DocumentType[]
@@ -183,40 +189,38 @@ export class WorkflowEditDialogComponent
 
   private allowedActionTypes = []
 
-  constructor(
+  constructor() {
-    service: WorkflowService,
+    super()
-    activeModal: NgbActiveModal,
+    this.service = inject(WorkflowService)
-    correspondentService: CorrespondentService,
+    this.correspondentService = inject(CorrespondentService)
-    documentTypeService: DocumentTypeService,
+    this.documentTypeService = inject(DocumentTypeService)
-    storagePathService: StoragePathService,
+    this.storagePathService = inject(StoragePathService)
-    mailRuleService: MailRuleService,
+    this.mailRuleService = inject(MailRuleService)
-    userService: UserService,
+    this.userService = inject(UserService)
-    settingsService: SettingsService,
+    this.settingsService = inject(SettingsService)
-    customFieldsService: CustomFieldsService
+    this.customFieldsService = inject(CustomFieldsService)
-  ) {
-    super(service, activeModal, userService, settingsService)
 
-    correspondentService
+    this.correspondentService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.correspondents = result.results))
 
-    documentTypeService
+    this.documentTypeService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.documentTypes = result.results))
 
-    storagePathService
+    this.storagePathService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.storagePaths = result.results))
 
-    mailRuleService
+    this.mailRuleService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.mailRules = result.results))
 
-    customFieldsService
+    this.customFieldsService
       .listAll()
       .pipe(first())
       .subscribe((result) => {

src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, inject } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -13,6 +13,10 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
   imports: [FormsModule, NgxBootstrapIconsModule],
 })
 export class EmailDocumentDialogComponent extends LoadingComponentWithPermissions {
+  private activeModal = inject(NgbActiveModal)
+  private documentService = inject(DocumentService)
+  private toastService = inject(ToastService)
+
   @Input()
   title = $localize`Email Document`
 
@@ -37,11 +41,7 @@ export class EmailDocumentDialogComponent extends LoadingComponentWithPermission
   public emailSubject: string = ''
   public emailMessage: string = ''
 
-  constructor(
+  constructor() {
-    private activeModal: NgbActiveModal,
-    private documentService: DocumentService,
-    private toastService: ToastService
-  ) {
     super()
     this.loading = false
   }

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts

@@ -7,6 +7,7 @@ import {
   OnInit,
   Output,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDropdown, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
@@ -434,6 +435,9 @@ export class FilterableDropdownComponent
   extends LoadingComponentWithPermissions
   implements OnInit
 {
+  private filterPipe = inject(FilterPipe)
+  private hotkeyService = inject(HotKeyService)
+
   @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef
   @ViewChild('dropdown') dropdown: NgbDropdown
   @ViewChild('buttonItems') buttonItems: ElementRef
@@ -536,10 +540,7 @@ export class FilterableDropdownComponent
 
   private keyboardIndex: number
 
-  constructor(
+  constructor() {
-    private filterPipe: FilterPipe,
-    private hotkeyService: HotKeyService
-  ) {
     super()
     this.selectionModelChange.subscribe((updatedModel) => {
       this.modelIsDirty = updatedModel.isDirty()

src-ui/src/app/components/common/hotkey-dialog/hotkey-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 
 const SYMBOLS = {
@@ -19,11 +19,11 @@ const SYMBOLS = {
   styleUrl: './hotkey-dialog.component.scss',
 })
 export class HotkeyDialogComponent {
+  activeModal = inject(NgbActiveModal)
+
   public title: string = $localize`Keyboard shortcuts`
   public hotkeys: Map<string, string> = new Map()
 
-  constructor(public activeModal: NgbActiveModal) {}
-
   public close(): void {
     this.activeModal.close()
   }

src-ui/src/app/components/common/input/custom-fields-values/custom-fields-values.component.ts

@@ -2,6 +2,7 @@ import {
   Component,
   EventEmitter,
   forwardRef,
+  inject,
   Input,
   Output,
 } from '@angular/core'
@@ -55,7 +56,9 @@ import { UrlComponent } from '../url/url.component'
 export class CustomFieldsValuesComponent extends AbstractInputComponent<Object> {
   public CustomFieldDataType = CustomFieldDataType
 
-  constructor(customFieldsService: CustomFieldsService) {
+  constructor() {
+    const customFieldsService = inject(CustomFieldsService)
+
     super()
     customFieldsService.listAll().subscribe((items) => {
       this.fields = items.results

src-ui/src/app/components/common/input/date/date.component.ts

@@ -2,6 +2,7 @@ import {
   Component,
   EventEmitter,
   forwardRef,
+  inject,
   Input,
   OnInit,
   Output,
@@ -45,13 +46,9 @@ export class DateComponent
   extends AbstractInputComponent<string>
   implements OnInit
 {
-  constructor(
+  private settings = inject(SettingsService)
-    private settings: SettingsService,
+  private ngbDateParserFormatter = inject(NgbDateParserFormatter)
-    private ngbDateParserFormatter: NgbDateParserFormatter,
+  private isoDateAdapter = inject<NgbDateAdapter<string>>(NgbDateAdapter)
-    private isoDateAdapter: NgbDateAdapter<string>
-  ) {
-    super()
-  }
 
   @Input()
   suggestions: string[]

src-ui/src/app/components/common/input/document-link/document-link.component.ts

@@ -1,5 +1,12 @@
 import { AsyncPipe, NgTemplateOutlet } from '@angular/common'
-import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core'
+import {
+  Component,
+  forwardRef,
+  inject,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core'
 import {
   FormsModule,
   NG_VALUE_ACCESSOR,
@@ -52,6 +59,8 @@ export class DocumentLinkComponent
   extends AbstractInputComponent<any[]>
   implements OnInit, OnDestroy
 {
+  private documentsService = inject(DocumentService)
+
   documentsInput$ = new Subject<string>()
   foundDocuments$: Observable<Document[]>
   loading = false
@@ -75,10 +84,6 @@ export class DocumentLinkComponent
     return this.selectedDocuments.map((d) => d.id)
   }
 
-  constructor(private documentsService: DocumentService) {
-    super()
-  }
-
   ngOnInit() {
     this.loadDocs()
   }

src-ui/src/app/components/common/input/monetary/monetary.component.spec.ts

@@ -1,5 +1,6 @@
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { LOCALE_ID } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NG_VALUE_ACCESSOR } from '@angular/forms'
 import { MonetaryComponent } from './monetary.component'
@@ -41,8 +42,6 @@ describe('MonetaryComponent', () => {
 
   it('should set the default currency code based on LOCALE_ID', () => {
     expect(component.defaultCurrencyCode).toEqual('USD') // default
-    component = new MonetaryComponent('pt-BR')
-    expect(component.defaultCurrencyCode).toEqual('BRL')
   })
 
   it('should support setting a default currency code', () => {
@@ -87,3 +86,28 @@ describe('MonetaryComponent', () => {
     expect(component.value).toEqual('USD0.00')
   })
 })
+
+describe('MonetaryComponent (Alternate Locale)', () => {
+  let component: MonetaryComponent
+  let fixture: ComponentFixture<MonetaryComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MonetaryComponent],
+      providers: [
+        { provide: LOCALE_ID, useValue: 'pt-BR' }, // Brazilian Portuguese
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(MonetaryComponent)
+    fixture.debugElement.injector.get(NG_VALUE_ACCESSOR)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should set the default currency code based on LOCALE_ID', () => {
+    expect(component.defaultCurrencyCode).toEqual('BRL')
+  })
+})

src-ui/src/app/components/common/input/monetary/monetary.component.ts

@@ -1,5 +1,5 @@
 import { CurrencyPipe, getLocaleCurrencyCode } from '@angular/common'
-import { Component, forwardRef, Inject, Input, LOCALE_ID } from '@angular/core'
+import { Component, forwardRef, inject, Input, LOCALE_ID } from '@angular/core'
 import {
   FormsModule,
   NG_VALUE_ACCESSOR,
@@ -27,6 +27,8 @@ import { AbstractInputComponent } from '../abstract-input'
   ],
 })
 export class MonetaryComponent extends AbstractInputComponent<string> {
+  currentLocale = inject(LOCALE_ID)
+
   public currency: string = ''
 
   public _monetaryValue: string = ''
@@ -45,11 +47,10 @@ export class MonetaryComponent extends AbstractInputComponent<string> {
     if (currency) this.defaultCurrencyCode = currency
   }
 
-  constructor(@Inject(LOCALE_ID) currentLocale: string) {
+  constructor() {
     super()
-
     this.currency = this.defaultCurrencyCode =
-      this.defaultCurrency ?? getLocaleCurrencyCode(currentLocale)
+      this.defaultCurrency ?? getLocaleCurrencyCode(this.currentLocale)
   }
 
   writeValue(newValue: any): void {

src-ui/src/app/components/common/input/number/number.component.ts

@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input } from '@angular/core'
+import { Component, forwardRef, inject, Input } from '@angular/core'
 import {
   FormsModule,
   NG_VALUE_ACCESSOR,
@@ -22,16 +22,14 @@ import { AbstractInputComponent } from '../abstract-input'
   imports: [FormsModule, ReactiveFormsModule, NgxBootstrapIconsModule],
 })
 export class NumberComponent extends AbstractInputComponent<number> {
+  private documentService = inject(DocumentService)
+
   @Input()
   showAdd: boolean = true
 
   @Input()
   step: number = 1
 
-  constructor(private documentService: DocumentService) {
-    super()
-  }
-
   nextAsn() {
     if (this.value) {
       return

src-ui/src/app/components/common/input/permissions/permissions-group/permissions-group.component.ts

@@ -1,4 +1,4 @@
-import { Component, forwardRef } from '@angular/core'
+import { Component, forwardRef, inject } from '@angular/core'
 import {
   FormsModule,
   NG_VALUE_ACCESSOR,
@@ -26,7 +26,9 @@ import { AbstractInputComponent } from '../../abstract-input'
 export class PermissionsGroupComponent extends AbstractInputComponent<Group> {
   groups: Group[]
 
-  constructor(groupService: GroupService) {
+  constructor() {
+    const groupService = inject(GroupService)
+
     super()
     groupService
       .listAll()

src-ui/src/app/components/common/input/permissions/permissions-user/permissions-user.component.ts

@@ -1,4 +1,4 @@
-import { Component, forwardRef } from '@angular/core'
+import { Component, forwardRef, inject } from '@angular/core'
 import {
   FormsModule,
   NG_VALUE_ACCESSOR,
@@ -8,7 +8,6 @@ import { NgSelectComponent } from '@ng-select/ng-select'
 import { first } from 'rxjs/operators'
 import { User } from 'src/app/data/user'
 import { UserService } from 'src/app/services/rest/user.service'
-import { SettingsService } from 'src/app/services/settings.service'
 import { AbstractInputComponent } from '../../abstract-input'
 
 @Component({
@@ -27,7 +26,9 @@ import { AbstractInputComponent } from '../../abstract-input'
 export class PermissionsUserComponent extends AbstractInputComponent<User[]> {
   users: User[]
 
-  constructor(userService: UserService, settings: SettingsService) {
+  constructor() {
+    const userService = inject(UserService)
+
     super()
     userService
       .listAll()

src-ui/src/app/components/common/input/tags/tags.component.ts

@@ -2,6 +2,7 @@ import {
   Component,
   EventEmitter,
   forwardRef,
+  inject,
   Input,
   OnInit,
   Output,
@@ -45,10 +46,10 @@ import { TagComponent } from '../../tag/tag.component'
   ],
 })
 export class TagsComponent implements OnInit, ControlValueAccessor {
-  constructor(
+  private tagService = inject(TagService)
-    private tagService: TagService,
+  private modalService = inject(NgbModal)
-    private modalService: NgbModal
+
-  ) {
+  constructor() {
     this.createTagRef = this.createTag.bind(this)
   }
 

src-ui/src/app/components/common/logo/logo.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, inject } from '@angular/core'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { SettingsService } from 'src/app/services/settings.service'
 import { environment } from 'src/environments/environment'
@@ -9,6 +9,8 @@ import { environment } from 'src/environments/environment'
   styleUrls: ['./logo.component.scss'],
 })
 export class LogoComponent {
+  private settingsService = inject(SettingsService)
+
   @Input()
   extra_classes: string
 
@@ -24,8 +26,6 @@ export class LogoComponent {
       : null
   }
 
-  constructor(private settingsService: SettingsService) {}
-
   getClasses() {
     return ['logo'].concat(this.extra_classes).join(' ')
   }

src-ui/src/app/components/common/page-header/page-header.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, inject } from '@angular/core'
 import { Title } from '@angular/platform-browser'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -12,7 +12,7 @@ import { environment } from 'src/environments/environment'
   imports: [NgbPopoverModule, NgxBootstrapIconsModule, TourNgBootstrapModule],
 })
 export class PageHeaderComponent {
-  constructor(private titleService: Title) {}
+  private titleService = inject(Title)
 
   _title = ''
 

src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -24,13 +24,13 @@ import { SwitchComponent } from '../input/switch/switch.component'
   ],
 })
 export class PermissionsDialogComponent {
+  activeModal = inject(NgbActiveModal)
+  private userService = inject(UserService)
+
   users: User[]
   private o: ObjectWithPermissions = undefined
 
-  constructor(
+  constructor() {
-    public activeModal: NgbActiveModal,
-    private userService: UserService
-  ) {
     this.userService.listAll().subscribe((r) => (this.users = r.results))
   }
 

src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.ts

@@ -1,5 +1,5 @@
 import { NgClass } from '@angular/common'
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectComponent } from '@ng-select/ng-select'
@@ -58,6 +58,9 @@ export enum OwnerFilterType {
   ],
 })
 export class PermissionsFilterDropdownComponent extends ComponentWithPermissions {
+  permissionsService = inject(PermissionsService)
+  private settingsService = inject(SettingsService)
+
   public OwnerFilterType = OwnerFilterType
 
   @Input()
@@ -83,12 +86,12 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
     )
   }
 
-  constructor(
+  constructor() {
-    public permissionsService: PermissionsService,
+    const userService = inject(UserService)
-    userService: UserService,
+
-    private settingsService: SettingsService
-  ) {
     super()
+    const permissionsService = this.permissionsService
+
     if (
       permissionsService.currentUserCan(
         PermissionAction.View,

src-ui/src/app/components/common/permissions-select/permissions-select.component.ts

@@ -1,5 +1,5 @@
 import { KeyValuePipe } from '@angular/common'
-import { Component, forwardRef, Input, OnInit } from '@angular/core'
+import { Component, forwardRef, inject, Input, OnInit } from '@angular/core'
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -43,6 +43,9 @@ export class PermissionsSelectComponent
   extends ComponentWithPermissions
   implements OnInit, ControlValueAccessor
 {
+  private readonly permissionsService = inject(PermissionsService)
+  private readonly settingsService = inject(SettingsService)
+
   @Input()
   title: string = 'Permissions'
 
@@ -76,10 +79,7 @@ export class PermissionsSelectComponent
 
   public allowedTypes = Object.keys(PermissionType)
 
-  constructor(
+  constructor() {
-    private readonly permissionsService: PermissionsService,
-    private readonly settingsService: SettingsService
-  ) {
     super()
     if (!this.settingsService.get(SETTINGS_KEYS.AUDITLOG_ENABLED)) {
       this.allowedTypes.splice(this.allowedTypes.indexOf('History'), 1)

src-ui/src/app/components/common/preview-popup/preview-popup.component.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http'
-import { Component, Input, OnDestroy, ViewChild } from '@angular/core'
+import { Component, inject, Input, OnDestroy, ViewChild } from '@angular/core'
 import { NgbPopover, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { PdfViewerComponent, PdfViewerModule } from 'ng2-pdf-viewer'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -24,6 +24,10 @@ import { SettingsService } from 'src/app/services/settings.service'
   ],
 })
 export class PreviewPopupComponent implements OnDestroy {
+  private settingsService = inject(SettingsService)
+  private documentService = inject(DocumentService)
+  private http = inject(HttpClient)
+
   private _document: Document
   @Input()
   set document(document: Document) {
@@ -82,12 +86,6 @@ export class PreviewPopupComponent implements OnDestroy {
     )
   }
 
-  constructor(
-    private settingsService: SettingsService,
-    private documentService: DocumentService,
-    private http: HttpClient
-  ) {}
-
   ngOnDestroy(): void {
     this.unsubscribeNotifier.next(this)
   }

src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard'
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, inject } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -46,6 +46,11 @@ export class ProfileEditDialogComponent
   extends LoadingComponentWithPermissions
   implements OnInit
 {
+  private profileService = inject(ProfileService)
+  activeModal = inject(NgbActiveModal)
+  private toastService = inject(ToastService)
+  private clipboard = inject(Clipboard)
+
   public networkActive: boolean = false
   public error: any
 
@@ -83,15 +88,6 @@ export class ProfileEditDialogComponent
   public socialAccounts: SocialAccount[] = []
   public socialAccountProviders: SocialAccountProvider[] = []
 
-  constructor(
-    private profileService: ProfileService,
-    public activeModal: NgbActiveModal,
-    private toastService: ToastService,
-    private clipboard: Clipboard
-  ) {
-    super()
-  }
-
   ngOnInit(): void {
     this.networkActive = true
     this.profileService

src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.spec.ts

@@ -10,6 +10,7 @@ import {
   fakeAsync,
   tick,
 } from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
@@ -33,6 +34,8 @@ describe('ShareLinksDialogComponent', () => {
       imports: [
         ShareLinksDialogComponent,
         NgxBootstrapIconsModule.pick(allIcons),
+        FormsModule,
+        ReactiveFormsModule,
       ],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),
@@ -223,16 +226,18 @@ describe('ShareLinksDialogComponent', () => {
     )
   })
 
-  it('should disable archive switch & option if no archive available', () => {
+  it('should disable archive switch & option if no archive available', (done) => {
     component.hasArchiveVersion = false
     component.ngOnInit()
     fixture.detectChanges()
     expect(component.useArchiveVersion).toBeFalsy()
-    expect(
+    setTimeout(() => {
-      fixture.debugElement.query(By.css("input[type='checkbox']")).attributes[
+      // some stupid change detection issue
-        'ng-reflect-is-disabled'
+      const inputEl = fixture.debugElement.query(By.css('#versionSwitch'))
-      ]
+        .nativeElement as HTMLInputElement
-    ).toBeTruthy()
+      expect(inputEl.disabled).toBeTruthy()
+      done()
+    })
   })
 
   it('should support close', () => {

src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input, OnInit, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -16,6 +16,11 @@ import { environment } from 'src/environments/environment'
   imports: [FormsModule, ReactiveFormsModule, NgxBootstrapIconsModule],
 })
 export class ShareLinksDialogComponent implements OnInit {
+  private activeModal = inject(NgbActiveModal)
+  private shareLinkService = inject(ShareLinkService)
+  private toastService = inject(ToastService)
+  private clipboard = inject(Clipboard)
+
   EXPIRATION_OPTIONS = [
     { label: $localize`1 day`, value: 1 },
     { label: $localize`7 days`, value: 7 },
@@ -58,13 +63,6 @@ export class ShareLinksDialogComponent implements OnInit {
 
   useArchiveVersion: boolean = true
 
-  constructor(
-    private activeModal: NgbActiveModal,
-    private shareLinkService: ShareLinkService,
-    private toastService: ToastService,
-    private clipboard: Clipboard
-  ) {}
-
   ngOnInit(): void {
     if (this._documentId !== undefined) this.refresh()
   }

src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard'
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, inject } from '@angular/core'
 import {
   NgbActiveModal,
   NgbModalModule,
@@ -35,6 +35,13 @@ import { environment } from 'src/environments/environment'
   ],
 })
 export class SystemStatusDialogComponent implements OnInit {
+  activeModal = inject(NgbActiveModal)
+  private clipboard = inject(Clipboard)
+  private systemStatusService = inject(SystemStatusService)
+  private tasksService = inject(TasksService)
+  private toastService = inject(ToastService)
+  private permissionsService = inject(PermissionsService)
+
   public SystemStatusItemStatus = SystemStatusItemStatus
   public PaperlessTaskName = PaperlessTaskName
   public status: SystemStatus
@@ -49,15 +56,6 @@ export class SystemStatusDialogComponent implements OnInit {
     return this.permissionsService.isSuperUser()
   }
 
-  constructor(
-    public activeModal: NgbActiveModal,
-    private clipboard: Clipboard,
-    private systemStatusService: SystemStatusService,
-    private tasksService: TasksService,
-    private toastService: ToastService,
-    private permissionsService: PermissionsService
-  ) {}
-
   public ngOnInit() {
     this.versionMismatch =
       environment.production &&

src-ui/src/app/components/common/tag/tag.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
 import { Tag } from 'src/app/data/tag'
 import {
   PermissionAction,
@@ -13,14 +13,12 @@ import { TagService } from 'src/app/services/rest/tag.service'
   styleUrls: ['./tag.component.scss'],
 })
 export class TagComponent {
+  private permissionsService = inject(PermissionsService)
+  private tagService = inject(TagService)
+
   private _tag: Tag
   private _tagID: number
 
-  constructor(
-    private permissionsService: PermissionsService,
-    private tagService: TagService
-  ) {}
-
   @Input()
   public set tag(tag: Tag) {
     this._tag = tag

src-ui/src/app/components/common/toast/toast.component.ts

@@ -1,6 +1,6 @@
 import { Clipboard } from '@angular/cdk/clipboard'
 import { DecimalPipe } from '@angular/common'
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
 import {
   NgbProgressbarModule,
   NgbToastModule,
@@ -21,6 +21,8 @@ import { Toast } from 'src/app/services/toast.service'
   styleUrl: './toast.component.scss',
 })
 export class ToastComponent {
+  private clipboard = inject(Clipboard)
+
   @Input() toast: Toast
 
   @Input() autohide: boolean = true
@@ -31,8 +33,6 @@ export class ToastComponent {
 
   public copied: boolean = false
 
-  constructor(private clipboard: Clipboard) {}
-
   onShown(toast: Toast) {
     if (!this.autohide) return
 

src-ui/src/app/components/common/toasts/toasts.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core'
+import { Component, OnDestroy, OnInit, inject } from '@angular/core'
 import {
   NgbAccordionModule,
   NgbProgressbarModule,
@@ -20,7 +20,7 @@ import { ToastComponent } from '../toast/toast.component'
   ],
 })
 export class ToastsComponent implements OnInit, OnDestroy {
-  constructor(public toastService: ToastService) {}
+  toastService = inject(ToastService)
 
   private subscription: Subscription
 

src-ui/src/app/components/dashboard/dashboard.component.ts

@@ -5,7 +5,7 @@ import {
   DragDropModule,
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
@@ -42,13 +42,13 @@ import { WelcomeWidgetComponent } from './widgets/welcome-widget/welcome-widget.
   ],
 })
 export class DashboardComponent extends ComponentWithPermissions {
+  settingsService = inject(SettingsService)
+  savedViewService = inject(SavedViewService)
+  private tourService = inject(TourService)
+  private toastService = inject(ToastService)
+
   public dashboardViews: SavedView[] = []
-  constructor(
+  constructor() {
-    public settingsService: SettingsService,
-    public savedViewService: SavedViewService,
-    private tourService: TourService,
-    private toastService: ToastService
-  ) {
     super()
 
     this.savedViewService.listAll().subscribe(() => {

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts

@@ -1,6 +1,7 @@
 import { AsyncPipe, NgClass, NgStyle } from '@angular/common'
 import {
   Component,
+  inject,
   Input,
   OnDestroy,
   OnInit,
@@ -84,26 +85,22 @@ export class SavedViewWidgetComponent
   extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy
 {
+  private documentService = inject(DocumentService)
+  private router = inject(Router)
+  private list = inject(DocumentListViewService)
+  private websocketStatusService = inject(WebsocketStatusService)
+  openDocumentsService = inject(OpenDocumentsService)
+  documentListViewService = inject(DocumentListViewService)
+  permissionsService = inject(PermissionsService)
+  private settingsService = inject(SettingsService)
+  private customFieldService = inject(CustomFieldsService)
+
   public DisplayMode = DisplayMode
   public DisplayField = DisplayField
   public CustomFieldDataType = CustomFieldDataType
 
   private customFields: CustomField[] = []
 
-  constructor(
-    private documentService: DocumentService,
-    private router: Router,
-    private list: DocumentListViewService,
-    private websocketStatusService: WebsocketStatusService,
-    public openDocumentsService: OpenDocumentsService,
-    public documentListViewService: DocumentListViewService,
-    public permissionsService: PermissionsService,
-    private settingsService: SettingsService,
-    private customFieldService: CustomFieldsService
-  ) {
-    super()
-  }
-
   @Input()
   savedView: SavedView
 

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts

@@ -1,6 +1,6 @@
 import { DecimalPipe } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
-import { Component, OnDestroy, OnInit } from '@angular/core'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import * as mimeTypeNames from 'mime-names'
@@ -51,15 +51,11 @@ export class StatisticsWidgetComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  loading: boolean = false
+  private http = inject(HttpClient)
+  private websocketConnectionService = inject(WebsocketStatusService)
+  private documentListViewService = inject(DocumentListViewService)
 
-  constructor(
+  loading: boolean = false
-    private http: HttpClient,
-    private websocketConnectionService: WebsocketStatusService,
-    private documentListViewService: DocumentListViewService
-  ) {
-    super()
-  }
 
   statistics: Statistics = {}
 

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts

@@ -1,5 +1,5 @@
 import { NgClass, NgTemplateOutlet } from '@angular/common'
-import { Component, QueryList, ViewChildren } from '@angular/core'
+import { Component, QueryList, ViewChildren, inject } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import {
   NgbAlert,
@@ -37,15 +37,11 @@ import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
   ],
 })
 export class UploadFileWidgetComponent extends ComponentWithPermissions {
-  @ViewChildren(NgbAlert) alerts: QueryList<NgbAlert>
+  private websocketStatusService = inject(WebsocketStatusService)
+  private uploadDocumentsService = inject(UploadDocumentsService)
+  settingsService = inject(SettingsService)
 
-  constructor(
+  @ViewChildren(NgbAlert) alerts: QueryList<NgbAlert>
-    private websocketStatusService: WebsocketStatusService,
-    private uploadDocumentsService: UploadDocumentsService,
-    public settingsService: SettingsService
-  ) {
-    super()
-  }
 
   getStatus() {
     return this.websocketStatusService.getConsumerStatus()

src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core'
+import { Component, EventEmitter, Output, inject } from '@angular/core'
 import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 
@@ -9,7 +9,7 @@ import { TourService } from 'ngx-ui-tour-ng-bootstrap'
   imports: [NgbAlertModule],
 })
 export class WelcomeWidgetComponent {
-  constructor(public readonly tourService: TourService) {}
+  readonly tourService = inject(TourService)
 
   @Output()
   dismiss: EventEmitter<boolean> = new EventEmitter()

src-ui/src/app/components/document-asn/document-asn.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, inject } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { FILTER_ASN } from '../../data/filter-rule-type'
 import { DocumentService } from '../../services/rest/document.service'
@@ -9,12 +9,11 @@ import { DocumentService } from '../../services/rest/document.service'
   styleUrls: ['./document-asn.component.scss'],
 })
 export class DocumentAsnComponent implements OnInit {
+  private documentsService = inject(DocumentService)
+  private route = inject(ActivatedRoute)
+  private router = inject(Router)
+
   asn: string
-  constructor(
-    private documentsService: DocumentService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {}
 
   ngOnInit(): void {
     this.route.paramMap.subscribe((paramMap) => {

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -1,6 +1,6 @@
 import { AsyncPipe, NgTemplateOutlet } from '@angular/common'
 import { HttpClient, HttpResponse } from '@angular/common/http'
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { Component, inject, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import {
   FormArray,
   FormControl,
@@ -176,6 +176,26 @@ export class DocumentDetailComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy, DirtyComponent
 {
+  private documentsService = inject(DocumentService)
+  private route = inject(ActivatedRoute)
+  private correspondentService = inject(CorrespondentService)
+  private documentTypeService = inject(DocumentTypeService)
+  private router = inject(Router)
+  private modalService = inject(NgbModal)
+  private openDocumentService = inject(OpenDocumentsService)
+  private documentListViewService = inject(DocumentListViewService)
+  private documentTitlePipe = inject(DocumentTitlePipe)
+  private toastService = inject(ToastService)
+  private settings = inject(SettingsService)
+  private storagePathService = inject(StoragePathService)
+  private permissionsService = inject(PermissionsService)
+  private userService = inject(UserService)
+  private customFieldsService = inject(CustomFieldsService)
+  private http = inject(HttpClient)
+  private hotKeyService = inject(HotKeyService)
+  private componentRouterService = inject(ComponentRouterService)
+  private deviceDetectorService = inject(DeviceDetectorService)
+
   @ViewChild('inputTitle')
   titleInput: TextComponent
 
@@ -259,30 +279,6 @@ export class DocumentDetailComponent
   DocumentDetailNavIDs = DocumentDetailNavIDs
   activeNavID: number
 
-  constructor(
-    private documentsService: DocumentService,
-    private route: ActivatedRoute,
-    private correspondentService: CorrespondentService,
-    private documentTypeService: DocumentTypeService,
-    private router: Router,
-    private modalService: NgbModal,
-    private openDocumentService: OpenDocumentsService,
-    private documentListViewService: DocumentListViewService,
-    private documentTitlePipe: DocumentTitlePipe,
-    private toastService: ToastService,
-    private settings: SettingsService,
-    private storagePathService: StoragePathService,
-    private permissionsService: PermissionsService,
-    private userService: UserService,
-    private customFieldsService: CustomFieldsService,
-    private http: HttpClient,
-    private hotKeyService: HotKeyService,
-    private componentRouterService: ComponentRouterService,
-    private deviceDetectorService: DeviceDetectorService
-  ) {
-    super()
-  }
-
   titleKeyUp(event) {
     this.titleSubject.next(event.target?.value)
   }

src-ui/src/app/components/document-history/document-history.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe, KeyValuePipe, TitleCasePipe } from '@angular/common'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input, OnInit, inject } from '@angular/core'
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Observable, first, map, of } from 'rxjs'
@@ -26,6 +26,12 @@ import { UserService } from 'src/app/services/rest/user.service'
   ],
 })
 export class DocumentHistoryComponent implements OnInit {
+  private documentService = inject(DocumentService)
+  private correspondentService = inject(CorrespondentService)
+  private storagePathService = inject(StoragePathService)
+  private documentTypeService = inject(DocumentTypeService)
+  private userService = inject(UserService)
+
   public AuditLogAction = AuditLogAction
 
   private _documentId: number
@@ -38,14 +44,6 @@ export class DocumentHistoryComponent implements OnInit {
   public loading: boolean = true
   public entries: AuditLogEntry[] = []
 
-  constructor(
-    private documentService: DocumentService,
-    private correspondentService: CorrespondentService,
-    private storagePathService: StoragePathService,
-    private documentTypeService: DocumentTypeService,
-    private userService: UserService
-  ) {}
-
   ngOnInit(): void {
     if (this._documentId) {
       this.loading = true

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -71,6 +71,19 @@ export class BulkEditorComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy
 {
+  private documentTypeService = inject(DocumentTypeService)
+  private tagService = inject(TagService)
+  private correspondentService = inject(CorrespondentService)
+  list = inject(DocumentListViewService)
+  private documentService = inject(DocumentService)
+  private modalService = inject(NgbModal)
+  private openDocumentService = inject(OpenDocumentsService)
+  private settings = inject(SettingsService)
+  private toastService = inject(ToastService)
+  private storagePathService = inject(StoragePathService)
+  private customFieldService = inject(CustomFieldsService)
+  private permissionService = inject(PermissionsService)
+
   tagSelectionModel = new FilterableDropdownSelectionModel(true)
   correspondentSelectionModel = new FilterableDropdownSelectionModel()
   documentTypeSelectionModel = new FilterableDropdownSelectionModel()
@@ -94,23 +107,6 @@ export class BulkEditorComponent
   @Input()
   public disabled: boolean = false
 
-  constructor(
-    private documentTypeService: DocumentTypeService,
-    private tagService: TagService,
-    private correspondentService: CorrespondentService,
-    public list: DocumentListViewService,
-    private documentService: DocumentService,
-    private modalService: NgbModal,
-    private openDocumentService: OpenDocumentsService,
-    private settings: SettingsService,
-    private toastService: ToastService,
-    private storagePathService: StoragePathService,
-    private customFieldService: CustomFieldsService,
-    private permissionService: PermissionsService
-  ) {
-    super()
-  }
-
   applyOnClose: boolean = this.settings.get(
     SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE
   )

src-ui/src/app/components/document-list/bulk-editor/custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core'
+import { Component, EventEmitter, Output, inject } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -38,6 +38,9 @@ import { DocumentService } from 'src/app/services/rest/document.service'
   ],
 })
 export class CustomFieldsBulkEditDialogComponent {
+  private activeModal = inject(NgbActiveModal)
+  private documentService = inject(DocumentService)
+
   CustomFieldDataType = CustomFieldDataType
 
   @Output()
@@ -73,11 +76,6 @@ export class CustomFieldsBulkEditDialogComponent {
 
   public documents: number[] = []
 
-  constructor(
-    private activeModal: NgbActiveModal,
-    private documentService: DocumentService
-  ) {}
-
   initForm() {
     Object.keys(this.form.controls).forEach((key) => {
       if (!this._fieldsToAddIds.includes(parseInt(key))) {

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts

@@ -6,6 +6,7 @@ import {
   Input,
   Output,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import {
@@ -62,14 +63,10 @@ export class DocumentCardLargeComponent
   extends LoadingComponentWithPermissions
   implements AfterViewInit
 {
-  DisplayField = DisplayField
+  private documentService = inject(DocumentService)
+  settingsService = inject(SettingsService)
 
-  constructor(
+  DisplayField = DisplayField
-    private documentService: DocumentService,
-    public settingsService: SettingsService
-  ) {
-    super()
-  }
 
   @Input()
   selected = false

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -71,14 +71,14 @@
           }
           @if (displayFields.includes(DisplayField.CREATED)) {
             <div class="list-group-item bg-transparent p-0 border-0 d-flex flex-wrap-reverse justify-content-between">
-              <ng-template #dateTooltip>
+              <ng-template #dateCreatedTooltip>
                 <div class="d-flex flex-column text-light">
                   <span i18n>Created: {{ document.created | customDate }}</span>
                   <span i18n>Added: {{ document.added | customDate }}</span>
                   <span i18n>Modified: {{ document.modified | customDate }}</span>
                 </div>
               </ng-template>
-              <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateTooltip">
+              <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateCreatedTooltip">
                 <i-bs width="1em" height="1em" class="me-2 text-muted" name="calendar-event"></i-bs>
                 <small>{{document.created | customDate:'mediumDate'}}</small>
               </div>
@@ -86,14 +86,14 @@
           }
           @if (displayFields.includes(DisplayField.ADDED)) {
             <div class="list-group-item bg-transparent p-0 border-0 d-flex flex-wrap-reverse justify-content-between">
-              <ng-template #dateTooltip>
+              <ng-template #dateAddedTooltip>
                 <div class="d-flex flex-column text-light">
                   <span i18n>Created: {{ document.created | customDate }}</span>
                   <span i18n>Added: {{ document.added | customDate }}</span>
                   <span i18n>Modified: {{ document.modified | customDate }}</span>
                 </div>
               </ng-template>
-              <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateTooltip">
+              <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateAddedTooltip">
                 <i-bs width="1em" height="1em" class="me-2 text-muted" name="calendar-event"></i-bs>
                 <small>{{document.added | customDate:'mediumDate'}}</small>
               </div>

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -6,6 +6,7 @@ import {
   Input,
   Output,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import {
@@ -63,14 +64,10 @@ export class DocumentCardSmallComponent
   extends LoadingComponentWithPermissions
   implements AfterViewInit
 {
-  DisplayField = DisplayField
+  private documentService = inject(DocumentService)
+  settingsService = inject(SettingsService)
 
-  constructor(
+  DisplayField = DisplayField
-    private documentService: DocumentService,
-    public settingsService: SettingsService
-  ) {
-    super()
-  }
 
   @Input()
   selected = false

src-ui/src/app/components/document-list/document-list.component.ts

@@ -1,6 +1,7 @@
 import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common'
 import {
   Component,
+  inject,
   OnDestroy,
   OnInit,
   QueryList,
@@ -103,25 +104,21 @@ export class DocumentListComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy
 {
+  list = inject(DocumentListViewService)
+  savedViewService = inject(SavedViewService)
+  route = inject(ActivatedRoute)
+  private router = inject(Router)
+  private toastService = inject(ToastService)
+  private modalService = inject(NgbModal)
+  private websocketStatusService = inject(WebsocketStatusService)
+  openDocumentsService = inject(OpenDocumentsService)
+  settingsService = inject(SettingsService)
+  private hotKeyService = inject(HotKeyService)
+  permissionService = inject(PermissionsService)
+
   DisplayField = DisplayField
   DisplayMode = DisplayMode
 
-  constructor(
-    public list: DocumentListViewService,
-    public savedViewService: SavedViewService,
-    public route: ActivatedRoute,
-    private router: Router,
-    private toastService: ToastService,
-    private modalService: NgbModal,
-    private websocketStatusService: WebsocketStatusService,
-    public openDocumentsService: OpenDocumentsService,
-    public settingsService: SettingsService,
-    private hotKeyService: HotKeyService,
-    public permissionService: PermissionsService
-  ) {
-    super()
-  }
-
   @ViewChild('filterEditor')
   private filterEditor: FilterEditorComponent
 

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts

@@ -8,6 +8,7 @@ import {
   OnInit,
   Output,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
@@ -240,6 +241,15 @@ export class FilterEditorComponent
   extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy, AfterViewInit
 {
+  private documentTypeService = inject(DocumentTypeService)
+  private tagService = inject(TagService)
+  private correspondentService = inject(CorrespondentService)
+  private documentService = inject(DocumentService)
+  private storagePathService = inject(StoragePathService)
+  permissionsService = inject(PermissionsService)
+  private customFieldService = inject(CustomFieldsService)
+  private searchService = inject(SearchService)
+
   generateFilterName() {
     if (this.filterRules.length == 1) {
       let rule = this.filterRules[0]
@@ -313,19 +323,6 @@ export class FilterEditorComponent
     return ''
   }
 
-  constructor(
-    private documentTypeService: DocumentTypeService,
-    private tagService: TagService,
-    private correspondentService: CorrespondentService,
-    private documentService: DocumentService,
-    private storagePathService: StoragePathService,
-    public permissionsService: PermissionsService,
-    private customFieldService: CustomFieldsService,
-    private searchService: SearchService
-  ) {
-    super()
-  }
-
   @ViewChild('textFilterInput')
   textFilterInput: ElementRef
 

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts

@@ -1,4 +1,11 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  inject,
+} from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -16,7 +23,7 @@ import { TextComponent } from '../../common/input/text/text.component'
   imports: [CheckComponent, TextComponent, FormsModule, ReactiveFormsModule],
 })
 export class SaveViewConfigDialogComponent implements OnInit {
-  constructor(private modal: NgbActiveModal) {}
+  private modal = inject(NgbActiveModal)
 
   @Output()
   public saveClicked = new EventEmitter()

src-ui/src/app/components/document-notes/document-notes.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -28,6 +28,10 @@ import { ComponentWithPermissions } from '../with-permissions/with-permissions.c
   ],
 })
 export class DocumentNotesComponent extends ComponentWithPermissions {
+  private notesService = inject(DocumentNotesService)
+  private toastService = inject(ToastService)
+  private usersService = inject(UserService)
+
   noteForm: FormGroup = new FormGroup({
     newNote: new FormControl(''),
   })
@@ -48,11 +52,7 @@ export class DocumentNotesComponent extends ComponentWithPermissions {
   updated: EventEmitter<DocumentNote[]> = new EventEmitter()
   users: User[]
 
-  constructor(
+  constructor() {
-    private notesService: DocumentNotesService,
-    private toastService: ToastService,
-    private usersService: UserService
-  ) {
     super()
     this.usersService.listAll().subscribe({
       next: (users) => {

src-ui/src/app/components/file-drop/file-drop.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener } from '@angular/core'
+import { Component, HostListener, inject } from '@angular/core'
 import {
   PermissionAction,
   PermissionsService,
@@ -15,17 +15,15 @@ import { UploadDocumentsService } from 'src/app/services/upload-documents.servic
   imports: [],
 })
 export class FileDropComponent {
+  private settings = inject(SettingsService)
+  private toastService = inject(ToastService)
+  private uploadDocumentsService = inject(UploadDocumentsService)
+  private permissionsService = inject(PermissionsService)
+
   private fileLeaveTimeoutID: any
   fileIsOver: boolean = false
   hidden: boolean = true
 
-  constructor(
-    private settings: SettingsService,
-    private toastService: ToastService,
-    private uploadDocumentsService: UploadDocumentsService,
-    private permissionsService: PermissionsService
-  ) {}
-
   public get dragDropEnabled(): boolean {
     return (
       this.settings.globalDropzoneEnabled &&

src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts

@@ -1,9 +1,8 @@
 import { NgClass, TitleCasePipe } from '@angular/common'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
   NgbDropdownModule,
-  NgbModal,
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -12,13 +11,8 @@ import { FILTER_HAS_CORRESPONDENT_ANY } from 'src/app/data/filter-rule-type'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
-import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { PermissionType } from 'src/app/services/permissions.service'
-import {
-  PermissionsService,
-  PermissionType,
-} from 'src/app/services/permissions.service'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
-import { ToastService } from 'src/app/services/toast.service'
 import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { ManagementListComponent } from '../management-list/management-list.component'
@@ -42,47 +36,37 @@ import { ManagementListComponent } from '../management-list/management-list.comp
   ],
 })
 export class CorrespondentListComponent extends ManagementListComponent<Correspondent> {
-  constructor(
+  private datePipe = inject(CustomDatePipe)
-    correspondentsService: CorrespondentService,
+
-    modalService: NgbModal,
+  constructor() {
-    toastService: ToastService,
+    super()
-    documentListViewService: DocumentListViewService,
+    this.service = inject(CorrespondentService)
-    permissionsService: PermissionsService,
+    this.editDialogComponent = CorrespondentEditDialogComponent
-    private datePipe: CustomDatePipe
+    this.filterRuleType = FILTER_HAS_CORRESPONDENT_ANY
-  ) {
+    this.typeName = $localize`correspondent`
-    super(
+    this.typeNamePlural = $localize`correspondents`
-      correspondentsService,
+    this.permissionType = PermissionType.Correspondent
-      modalService,
+    this.extraColumns = [
-      CorrespondentEditDialogComponent,
+      {
-      toastService,
+        key: 'last_correspondence',
-      documentListViewService,
+        name: $localize`Last used`,
-      permissionsService,
+        valueFn: (c: Correspondent) => {
-      FILTER_HAS_CORRESPONDENT_ANY,
+          if (c.last_correspondence) {
-      $localize`correspondent`,
+            let date = new Date(c.last_correspondence)
-      $localize`correspondents`,
+            if (date.toString() == 'Invalid Date') {
-      PermissionType.Correspondent,
+              // very old date strings are unable to be parsed
-      [
+              date = new Date(
-        {
+                c.last_correspondence
-          key: 'last_correspondence',
+                  ?.toString()
-          name: $localize`Last used`,
+                  .replace(/([-+])(\d\d):\d\d:\d\d/gm, `$1$2:00`)
-          valueFn: (c: Correspondent) => {
+              )
-            if (c.last_correspondence) {
-              let date = new Date(c.last_correspondence)
-              if (date.toString() == 'Invalid Date') {
-                // very old date strings are unable to be parsed
-                date = new Date(
-                  c.last_correspondence
-                    ?.toString()
-                    .replace(/([-+])(\d\d):\d\d:\d\d/gm, `$1$2:00`)
-                )
-              }
-              return this.datePipe.transform(date)
             }
-            return ''
+            return this.datePipe.transform(date)
-          },
+          }
+          return ''
         },
-      ]
+      },
-    )
+    ]
   }
 
   public reloadData(): void {

src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, inject } from '@angular/core'
 import {
   NgbDropdownModule,
   NgbModal,
@@ -42,20 +42,16 @@ export class CustomFieldsComponent
   extends LoadingComponentWithPermissions
   implements OnInit
 {
-  public fields: CustomField[] = []
+  private customFieldsService = inject(CustomFieldsService)
+  permissionsService = inject(PermissionsService)
+  private modalService = inject(NgbModal)
+  private toastService = inject(ToastService)
+  private documentListViewService = inject(DocumentListViewService)
+  private settingsService = inject(SettingsService)
+  private documentService = inject(DocumentService)
+  private savedViewService = inject(SavedViewService)
 
-  constructor(
+  public fields: CustomField[] = []
-    private customFieldsService: CustomFieldsService,
-    public permissionsService: PermissionsService,
-    private modalService: NgbModal,
-    private toastService: ToastService,
-    private documentListViewService: DocumentListViewService,
-    private settingsService: SettingsService,
-    private documentService: DocumentService,
-    private savedViewService: SavedViewService
-  ) {
-    super()
-  }
 
   ngOnInit() {
     this.reload()

src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts

@@ -1,9 +1,8 @@
 import { NgClass, TitleCasePipe } from '@angular/common'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
   NgbDropdownModule,
-  NgbModal,
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -11,13 +10,8 @@ import { DocumentType } from 'src/app/data/document-type'
 import { FILTER_HAS_DOCUMENT_TYPE_ANY } from 'src/app/data/filter-rule-type'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
-import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { PermissionType } from 'src/app/services/permissions.service'
-import {
-  PermissionsService,
-  PermissionType,
-} from 'src/app/services/permissions.service'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
-import { ToastService } from 'src/app/services/toast.service'
 import { DocumentTypeEditDialogComponent } from '../../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { ManagementListComponent } from '../management-list/management-list.component'
@@ -40,26 +34,14 @@ import { ManagementListComponent } from '../management-list/management-list.comp
   ],
 })
 export class DocumentTypeListComponent extends ManagementListComponent<DocumentType> {
-  constructor(
+  constructor() {
-    documentTypeService: DocumentTypeService,
+    super()
-    modalService: NgbModal,
+    this.service = inject(DocumentTypeService)
-    toastService: ToastService,
+    this.editDialogComponent = DocumentTypeEditDialogComponent
-    documentListViewService: DocumentListViewService,
+    this.filterRuleType = FILTER_HAS_DOCUMENT_TYPE_ANY
-    permissionsService: PermissionsService
+    this.typeName = $localize`document type`
-  ) {
+    this.typeNamePlural = $localize`document types`
-    super(
+    this.permissionType = PermissionType.DocumentType
-      documentTypeService,
-      modalService,
-      DocumentTypeEditDialogComponent,
-      toastService,
-      documentListViewService,
-      permissionsService,
-      FILTER_HAS_DOCUMENT_TYPE_ANY,
-      $localize`document type`,
-      $localize`document types`,
-      PermissionType.DocumentType,
-      []
-    )
   }
 
   getDeleteMessage(object: DocumentType) {

src-ui/src/app/components/manage/mail/mail.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common'
-import { Component, OnDestroy, OnInit } from '@angular/core'
+import { Component, OnDestroy, OnInit, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { ActivatedRoute } from '@angular/router'
 import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
@@ -47,6 +47,14 @@ export class MailComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy
 {
+  mailAccountService = inject(MailAccountService)
+  mailRuleService = inject(MailRuleService)
+  private toastService = inject(ToastService)
+  private modalService = inject(NgbModal)
+  permissionsService = inject(PermissionsService)
+  private settingsService = inject(SettingsService)
+  private route = inject(ActivatedRoute)
+
   public MailAccountType = MailAccountType
 
   mailAccounts: MailAccount[] = []
@@ -68,18 +76,6 @@ export class MailComponent
   public loadingAccounts: boolean = true
   public showAccounts: boolean = false
 
-  constructor(
-    public mailAccountService: MailAccountService,
-    public mailRuleService: MailRuleService,
-    private toastService: ToastService,
-    private modalService: NgbModal,
-    public permissionsService: PermissionsService,
-    private settingsService: SettingsService,
-    private route: ActivatedRoute
-  ) {
-    super()
-  }
-
   ngOnInit(): void {
     this.mailAccountService
       .listAll(null, null, { full_perms: true })

src-ui/src/app/components/manage/management-list/management-list.component.ts

@@ -1,6 +1,7 @@
 import { HttpErrorResponse } from '@angular/common/http'
 import {
   Directive,
+  inject,
   OnDestroy,
   OnInit,
   QueryList,
@@ -59,21 +60,19 @@ export abstract class ManagementListComponent<T extends MatchingModel>
   extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  constructor(
+  protected service: AbstractNameFilterService<T>
-    protected service: AbstractNameFilterService<T>,
+  private modalService: NgbModal = inject(NgbModal)
-    private modalService: NgbModal,
+  protected editDialogComponent: any
-    private editDialogComponent: any,
+  private toastService: ToastService = inject(ToastService)
-    private toastService: ToastService,
+  private documentListViewService: DocumentListViewService = inject(
-    private documentListViewService: DocumentListViewService,
+    DocumentListViewService
-    private permissionsService: PermissionsService,
+  )
-    protected filterRuleType: number,
+  private permissionsService: PermissionsService = inject(PermissionsService)
-    public typeName: string,
+  protected filterRuleType: number
-    public typeNamePlural: string,
+  public typeName: string
-    public permissionType: PermissionType,
+  public typeNamePlural: string
-    public extraColumns: ManagementListColumn[]
+  public permissionType: PermissionType
-  ) {
+  public extraColumns: ManagementListColumn[]
-    super()
-  }
 
   @ViewChildren(SortableDirective) headers: QueryList<SortableDirective>
 

src-ui/src/app/components/manage/saved-views/saved-views.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common'
-import { Component, OnDestroy, OnInit } from '@angular/core'
+import { Component, OnDestroy, OnInit, inject } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -40,6 +40,10 @@ export class SavedViewsComponent
   extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy
 {
+  private savedViewService = inject(SavedViewService)
+  private settings = inject(SettingsService)
+  private toastService = inject(ToastService)
+
   DisplayMode = DisplayMode
 
   public savedViews: SavedView[]
@@ -55,11 +59,7 @@ export class SavedViewsComponent
     return this.settings.allDisplayFields
   }
 
-  constructor(
+  constructor() {
-    private savedViewService: SavedViewService,
-    private settings: SettingsService,
-    private toastService: ToastService
-  ) {
     super()
     this.settings.organizingSidebarSavedViews = true
   }

src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.ts

@@ -1,9 +1,8 @@
 import { NgClass, TitleCasePipe } from '@angular/common'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
   NgbDropdownModule,
-  NgbModal,
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -12,13 +11,8 @@ import { StoragePath } from 'src/app/data/storage-path'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
-import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { PermissionType } from 'src/app/services/permissions.service'
-import {
-  PermissionsService,
-  PermissionType,
-} from 'src/app/services/permissions.service'
 import { StoragePathService } from 'src/app/services/rest/storage-path.service'
-import { ToastService } from 'src/app/services/toast.service'
 import { StoragePathEditDialogComponent } from '../../common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { ManagementListComponent } from '../management-list/management-list.component'
@@ -42,36 +36,25 @@ import { ManagementListComponent } from '../management-list/management-list.comp
   ],
 })
 export class StoragePathListComponent extends ManagementListComponent<StoragePath> {
-  constructor(
+  constructor() {
-    directoryService: StoragePathService,
+    super()
-    modalService: NgbModal,
+    this.service = inject(StoragePathService)
-    toastService: ToastService,
+    this.editDialogComponent = StoragePathEditDialogComponent
-    documentListViewService: DocumentListViewService,
+    this.filterRuleType = FILTER_HAS_STORAGE_PATH_ANY
-    permissionsService: PermissionsService
+    this.typeName = $localize`storage path`
-  ) {
+    this.typeNamePlural = $localize`storage paths`
-    super(
+    this.permissionType = PermissionType.StoragePath
-      directoryService,
+    this.extraColumns = [
-      modalService,
+      {
-      StoragePathEditDialogComponent,
+        key: 'path',
-      toastService,
+        name: $localize`Path`,
-      documentListViewService,
+        rendersHtml: true,
-      permissionsService,
+        hideOnMobile: true,
-      FILTER_HAS_STORAGE_PATH_ANY,
+        valueFn: (c: StoragePath) => {
-      $localize`storage path`,
+          return `<code>${c.path?.slice(0, 49)}${c.path?.length > 50 ? '...' : ''}</code>`
-      $localize`storage paths`,
-      PermissionType.StoragePath,
-      [
-        {
-          key: 'path',
-          name: $localize`Path`,
-          rendersHtml: true,
-          hideOnMobile: true,
-          valueFn: (c: StoragePath) => {
-            return `<code>${c.path?.slice(0, 49)}${c.path?.length > 50 ? '...' : ''}</code>`
-          },
         },
-      ]
+      },
-    )
+    ]
   }
 
   getDeleteMessage(object: StoragePath) {

src-ui/src/app/components/manage/tag-list/tag-list.component.ts

@@ -1,9 +1,8 @@
 import { NgClass, TitleCasePipe } from '@angular/common'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
   NgbDropdownModule,
-  NgbModal,
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -12,13 +11,8 @@ import { Tag } from 'src/app/data/tag'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
-import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { PermissionType } from 'src/app/services/permissions.service'
-import {
-  PermissionsService,
-  PermissionType,
-} from 'src/app/services/permissions.service'
 import { TagService } from 'src/app/services/rest/tag.service'
-import { ToastService } from 'src/app/services/toast.service'
 import { TagEditDialogComponent } from '../../common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { ManagementListComponent } from '../management-list/management-list.component'
@@ -42,35 +36,24 @@ import { ManagementListComponent } from '../management-list/management-list.comp
   ],
 })
 export class TagListComponent extends ManagementListComponent<Tag> {
-  constructor(
+  constructor() {
-    tagService: TagService,
+    super()
-    modalService: NgbModal,
+    this.service = inject(TagService)
-    toastService: ToastService,
+    this.editDialogComponent = TagEditDialogComponent
-    documentListViewService: DocumentListViewService,
+    this.filterRuleType = FILTER_HAS_TAGS_ALL
-    permissionsService: PermissionsService
+    this.typeName = $localize`tag`
-  ) {
+    this.typeNamePlural = $localize`tags`
-    super(
+    this.permissionType = PermissionType.Tag
-      tagService,
+    this.extraColumns = [
-      modalService,
+      {
-      TagEditDialogComponent,
+        key: 'color',
-      toastService,
+        name: $localize`Color`,
-      documentListViewService,
+        rendersHtml: true,
-      permissionsService,
+        valueFn: (t: Tag) => {
-      FILTER_HAS_TAGS_ALL,
+          return `<span class="badge" style="color: ${t.text_color}; background-color: ${t.color}">${t.color}</span>`
-      $localize`tag`,
-      $localize`tags`,
-      PermissionType.Tag,
-      [
-        {
-          key: 'color',
-          name: $localize`Color`,
-          rendersHtml: true,
-          valueFn: (t: Tag) => {
-            return `<span class="badge" style="color: ${t.text_color}; background-color: ${t.color}">${t.color}</span>`
-          },
         },
-      ]
+      },
-    )
+    ]
   }
 
   getDeleteMessage(object: Tag) {

src-ui/src/app/components/manage/workflows/workflows.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -34,16 +34,12 @@ export class WorkflowsComponent
   extends LoadingComponentWithPermissions
   implements OnInit
 {
-  public workflows: Workflow[] = []
+  private workflowService = inject(WorkflowService)
+  permissionsService = inject(PermissionsService)
+  private modalService = inject(NgbModal)
+  private toastService = inject(ToastService)
 
-  constructor(
+  public workflows: Workflow[] = []
-    private workflowService: WorkflowService,
-    public permissionsService: PermissionsService,
-    private modalService: NgbModal,
-    private toastService: ToastService
-  ) {
-    super()
-  }
 
   ngOnInit() {
     this.reload()

src-ui/src/app/directives/if-object-permissions.directive.ts

@@ -6,6 +6,7 @@ import {
   OnInit,
   TemplateRef,
   ViewContainerRef,
+  inject,
 } from '@angular/core'
 import { ObjectWithPermissions } from '../data/object-with-permissions'
 import {
@@ -17,6 +18,10 @@ import {
   selector: '[pngxIfObjectPermissions]',
 })
 export class IfObjectPermissionsDirective implements OnInit, OnChanges {
+  private viewContainerRef = inject(ViewContainerRef)
+  private templateRef = inject<TemplateRef<any>>(TemplateRef)
+  private permissionsService = inject(PermissionsService)
+
   // The role the user must have
   @Input()
   pngxIfObjectPermissions: {
@@ -26,17 +31,6 @@ export class IfObjectPermissionsDirective implements OnInit, OnChanges {
 
   createdView: EmbeddedViewRef<any>
 
-  /**
-   * @param {ViewContainerRef} viewContainerRef -- The location where we need to render the templateRef
-   * @param {TemplateRef<any>} templateRef -- The templateRef to be potentially rendered
-   * @param {PermissionsService} permissionsService -- Will give us access to the permissions a user has
-   */
-  constructor(
-    private viewContainerRef: ViewContainerRef,
-    private templateRef: TemplateRef<any>,
-    private permissionsService: PermissionsService
-  ) {}
-
   public ngOnInit(): void {
     if (
       !this.pngxIfObjectPermissions?.object ||

src-ui/src/app/directives/if-owner.directive.ts

@@ -6,6 +6,7 @@ import {
   OnInit,
   TemplateRef,
   ViewContainerRef,
+  inject,
 } from '@angular/core'
 import { ObjectWithPermissions } from '../data/object-with-permissions'
 import { PermissionsService } from '../services/permissions.service'
@@ -14,23 +15,16 @@ import { PermissionsService } from '../services/permissions.service'
   selector: '[pngxIfOwner]',
 })
 export class IfOwnerDirective implements OnInit, OnChanges {
+  private viewContainerRef = inject(ViewContainerRef)
+  private templateRef = inject<TemplateRef<any>>(TemplateRef)
+  private permissionsService = inject(PermissionsService)
+
   // The role the user must have
   @Input()
   pngxIfOwner: ObjectWithPermissions
 
   createdView: EmbeddedViewRef<any>
 
-  /**
-   * @param {ViewContainerRef} viewContainerRef -- The location where we need to render the templateRef
-   * @param {TemplateRef<any>} templateRef -- The templateRef to be potentially rendered
-   * @param {PermissionsService} permissionsService -- Will give us access to the permissions a user has
-   */
-  constructor(
-    private viewContainerRef: ViewContainerRef,
-    private templateRef: TemplateRef<any>,
-    private permissionsService: PermissionsService
-  ) {}
-
   public ngOnInit(): void {
     if (this.permissionsService.currentUserOwnsObject(this.pngxIfOwner)) {
       if (!this.createdView)

src-ui/src/app/directives/if-permissions.directive.ts

@@ -1,5 +1,6 @@
 import {
   Directive,
+  inject,
   Input,
   OnInit,
   TemplateRef,
@@ -15,22 +16,15 @@ import {
   selector: '[pngxIfPermissions]',
 })
 export class IfPermissionsDirective implements OnInit {
+  private viewContainerRef = inject(ViewContainerRef)
+  private templateRef = inject<TemplateRef<any>>(TemplateRef)
+  private permissionsService = inject(PermissionsService)
+
   @Input()
   pngxIfPermissions:
     | Array<{ action: PermissionAction; type: PermissionType }>
     | { action: PermissionAction; type: PermissionType }
 
-  /**
-   * @param {ViewContainerRef} viewContainerRef -- The location where we need to render the templateRef
-   * @param {TemplateRef<any>} templateRef -- The templateRef to be potentially rendered
-   * @param {PermissionsService} permissionsService -- Will give us access to the permissions a user has
-   */
-  constructor(
-    private viewContainerRef: ViewContainerRef,
-    private templateRef: TemplateRef<any>,
-    private permissionsService: PermissionsService
-  ) {}
-
   public ngOnInit(): void {
     if (
       []

src-ui/src/app/guards/dirty-form.guard.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { DirtyCheckGuard } from '@ngneat/dirty-check-forms'
 import { Observable, Subject } from 'rxjs'
@@ -6,9 +6,7 @@ import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog
 
 @Injectable({ providedIn: 'root' })
 export class DirtyFormGuard extends DirtyCheckGuard {
-  constructor(private modalService: NgbModal) {
+  private modalService = inject(NgbModal)
-    super()
-  }
 
   confirmChanges(): Observable<boolean> {
     let modal = this.modalService.open(ConfirmDialogComponent, {

src-ui/src/app/guards/dirty-saved-view.guard.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { first, Observable, Subject } from 'rxjs'
 import { ConfirmDialogComponent } from '../components/common/confirm-dialog/confirm-dialog.component'
@@ -8,10 +8,8 @@ import { SettingsService } from '../services/settings.service'
 
 @Injectable()
 export class DirtySavedViewGuard {
-  constructor(
+  private modalService = inject(NgbModal)
-    private modalService: NgbModal,
+  private settings = inject(SettingsService)
-    private settings: SettingsService
-  ) {}
 
   canDeactivate(
     component: DocumentListComponent

src-ui/src/app/guards/permissions.guard.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import {
   ActivatedRouteSnapshot,
   Router,
@@ -11,12 +11,10 @@ import { ToastService } from '../services/toast.service'
 
 @Injectable()
 export class PermissionsGuard {
-  constructor(
+  private permissionsService = inject(PermissionsService)
-    private permissionsService: PermissionsService,
+  private router = inject(Router)
-    private router: Router,
+  private toastService = inject(ToastService)
-    private toastService: ToastService,
+  private tourService = inject(TourService)
-    private tourService: TourService
-  ) {}
 
   canActivate(
     route: ActivatedRouteSnapshot,

src-ui/src/app/interceptors/csrf.interceptor.ts

@@ -4,17 +4,15 @@ import {
   HttpInterceptor,
   HttpRequest,
 } from '@angular/common/http'
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { Meta } from '@angular/platform-browser'
 import { CookieService } from 'ngx-cookie-service'
 import { Observable } from 'rxjs'
 
 @Injectable()
 export class CsrfInterceptor implements HttpInterceptor {
-  constructor(
+  private cookieService = inject(CookieService)
-    private cookieService: CookieService,
+  private meta = inject(Meta)
-    private meta: Meta
-  ) {}
 
   intercept(
     request: HttpRequest<unknown>,

src-ui/src/app/pipes/correspondent-name.pipe.spec.ts

@@ -2,7 +2,7 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { TestBed } from '@angular/core/testing'
 import { PermissionsService } from '../services/permissions.service'
-import { CorrespondentService } from '../services/rest/correspondent.service'
+import { AbstractNameFilterService } from '../services/rest/abstract-name-filter-service'
 import { CorrespondentNamePipe } from './correspondent-name.pipe'
 
 describe('CorrespondentNamePipe', () => {
@@ -11,6 +11,9 @@ describe('CorrespondentNamePipe', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [
+        CorrespondentNamePipe,
+        { provide: PermissionsService },
+        { provide: AbstractNameFilterService },
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
       ],
@@ -19,10 +22,7 @@ describe('CorrespondentNamePipe', () => {
 
   // The pipe is a simple wrapper around ObjectNamePipe, see ObjectNamePipe for the actual tests.
   it('should be created', () => {
-    pipe = new CorrespondentNamePipe(
+    pipe = TestBed.inject(CorrespondentNamePipe)
-      TestBed.inject(PermissionsService),
-      TestBed.inject(CorrespondentService)
-    )
     expect(pipe).toBeTruthy()
   })
 })

src-ui/src/app/pipes/correspondent-name.pipe.ts

@@ -1,4 +1,4 @@
-import { Pipe, PipeTransform } from '@angular/core'
+import { inject, Pipe, PipeTransform } from '@angular/core'
 import {
   PermissionsService,
   PermissionType,
@@ -13,10 +13,10 @@ export class CorrespondentNamePipe
   extends ObjectNamePipe
   implements PipeTransform
 {
-  constructor(
+  constructor() {
-    permissionsService: PermissionsService,
+    super()
-    objectService: CorrespondentService
+    this.permissionsService = inject(PermissionsService)
-  ) {
+    this.permissionType = PermissionType.Correspondent
-    super(permissionsService, PermissionType.Correspondent, objectService)
+    this.objectService = inject(CorrespondentService)
   }
 }

src-ui/src/app/pipes/custom-date.pipe.ts

@@ -1,5 +1,5 @@
 import { DatePipe } from '@angular/common'
-import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core'
+import { LOCALE_ID, Pipe, PipeTransform, inject } from '@angular/core'
 import { SETTINGS_KEYS } from '../data/ui-settings'
 import { SettingsService } from '../services/settings.service'
 
@@ -46,13 +46,14 @@ const INTERVALS = {
   name: 'customDate',
 })
 export class CustomDatePipe implements PipeTransform {
+  private datePipe = inject(DatePipe)
+  private settings = inject(SettingsService)
+
   private defaultLocale: string
 
-  constructor(
+  constructor() {
-    @Inject(LOCALE_ID) locale: string,
+    const locale = inject(LOCALE_ID)
-    private datePipe: DatePipe,
+
-    private settings: SettingsService
-  ) {
     this.defaultLocale = locale
   }