migrate angular 21 finalize

src/app/widget-modules/components/add-song/add-song.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, inject} from '@angular/core';
 import {ReactiveFormsModule, UntypedFormControl} from '@angular/forms';
 import {filterSong} from '../../../services/filter.helper';
 import {MatFormField, MatLabel, MatOption, MatSelect, MatSelectChange} from '@angular/material/select';
@@ -18,17 +18,15 @@ import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
   imports: [MatFormField, MatSelect, MatOption, MatLabel, NgxMatSelectSearchModule, ReactiveFormsModule],
 })
 export class AddSongComponent {
+  private showSongService = inject(ShowSongService);
+  private showService = inject(ShowService);
+
   @Input() public songs: Song[] | null = null;
   @Input() public showSongs: ShowSong[] | null = null;
   @Input() public show: Show | null = null;
   @Input() public addedLive = false;
   public filteredSongsControl = new UntypedFormControl();
 
-  public constructor(
-    private showSongService: ShowSongService,
-    private showService: ShowService
-  ) {}
-
   public filteredSongs(): Song[] {
     if (!this.songs) return [];
     const songs = this.songs

src/app/widget-modules/components/application-frame/navigation/filter/filter.component.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {ActivatedRoute, Params, Router} from '@angular/router';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 
@@ -9,12 +9,13 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
   imports: [ReactiveFormsModule, FormsModule],
 })
 export class FilterComponent {
+  private router = inject(Router);
+
   public value = '';
 
-  public constructor(
-    private router: Router,
-    activatedRoute: ActivatedRoute
-  ) {
+  public constructor() {
+    const activatedRoute = inject(ActivatedRoute);
+
     activatedRoute.queryParams.subscribe((params: Params) => {
       const typedParams = params as {q: string};
       if (typedParams.q) this.value = typedParams.q;

src/app/widget-modules/components/song-text/song-text.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, ViewChildren} from '@angular/core';
+import {ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, ViewChildren, inject} from '@angular/core';
 import {TextRenderingService} from '../../../modules/songs/services/text-rendering.service';
 import {faGripLines} from '@fortawesome/free-solid-svg-icons';
 import {songSwitch} from './animation';
@@ -21,6 +21,10 @@ export type ChordMode = 'show' | 'hide' | 'onlyFirst';
   imports: [MatIconButton, FaIconComponent],
 })
 export class SongTextComponent implements OnInit {
+  private textRenderingService = inject(TextRenderingService);
+  private elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private cRef = inject(ChangeDetectorRef);
+
   public sections: Section[] = [];
   @Input() public header: string | null = null;
   @Input() public index = -1;
@@ -35,12 +39,6 @@ export class SongTextComponent implements OnInit {
   private iText = '';
   private iTranspose: TransposeMode | null = null;
 
-  public constructor(
-    private textRenderingService: TextRenderingService,
-    private elRef: ElementRef<HTMLElement>,
-    private cRef: ChangeDetectorRef
-  ) {}
-
   @Input()
   public set chordMode(value: ChordMode) {
     this.iChordMode = value ?? 'hide';

src/app/widget-modules/directives/autofocus/autofocus.directive.ts

@@ -1,10 +1,9 @@
-import {Directive, ElementRef, Input, OnInit} from '@angular/core';
+import {Directive, ElementRef, Input, OnInit, inject} from '@angular/core';
 
 @Directive({selector: '[appAutofocus]'})
 export class AutofocusDirective implements OnInit {
   private focus = true;
-
-  public constructor(private el: ElementRef<HTMLElement>) {}
+  private el = inject<ElementRef<HTMLElement>>(ElementRef);
 
   @Input()
   public set autofocus(condition: boolean) {

src/app/widget-modules/guards/auth.guard.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {CanActivate, Router, UrlTree} from '@angular/router';
 import {Auth, authState} from '@angular/fire/auth';
 import {Observable} from 'rxjs';
@@ -8,10 +8,8 @@ import {map, take} from 'rxjs/operators';
   providedIn: 'root',
 })
 export class AuthGuard implements CanActivate {
-  public constructor(
-    private auth: Auth,
-    private router: Router
-  ) {}
+  private auth = inject(Auth);
+  private router = inject(Router);
 
   public canActivate(): Observable<boolean | UrlTree> {
     return authState(this.auth).pipe(

src/app/widget-modules/guards/role.guard.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {ActivatedRouteSnapshot, Router, UrlTree} from '@angular/router';
 import {Observable} from 'rxjs';
 import {UserService} from '../../services/user/user.service';
@@ -8,10 +8,8 @@ import {map} from 'rxjs/operators';
   providedIn: 'root',
 })
 export class RoleGuard {
-  public constructor(
-    private userService: UserService,
-    private router: Router
-  ) {}
+  private userService = inject(UserService);
+  private router = inject(Router);
 
   public canActivate(next: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {
     const requiredRoles = next.data.requiredRoles as string[];

src/app/widget-modules/pipes/sort-by/sort-by.pipe.ts

@@ -1,5 +1,4 @@
 import {Pipe, PipeTransform} from '@angular/core';
-import {orderBy} from 'lodash';
 
 @Pipe({
   name: 'sortBy',
@@ -19,7 +18,29 @@ export class SortByPipe implements PipeTransform {
     if (value.length <= 1) {
       return value;
     } // array with only one item
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    return orderBy(value, [column], [order]);
+    return [...value].sort((left, right) => {
+      const leftValue = this.getComparableValue(left, column);
+      const rightValue = this.getComparableValue(right, column);
+      const result = leftValue < rightValue ? -1 : leftValue > rightValue ? 1 : 0;
+      return order === 'asc' ? result : -result;
+    });
+  }
+
+  private getComparableValue(item: unknown, column: string): string | number {
+    const value = (item as Record<string, unknown>)[column];
+    if (value instanceof Date) {
+      return value.getTime();
+    }
+
+    switch (typeof value) {
+      case 'number':
+        return value;
+      case 'string':
+        return value;
+      case 'boolean':
+        return value ? 1 : 0;
+      default:
+        return '';
+    }
   }
 }