migrate angular 21 finalize

src/app/modules/shows/list/filter/filter.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, inject} from '@angular/core';
 import {KeyValue} from '@angular/common';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
@@ -9,7 +9,6 @@ import {distinctUntilChanged, map, switchMap} from 'rxjs/operators';
 import {combineLatest, Observable, of} from 'rxjs';
 import {dynamicSort, onlyUnique} from '../../../../services/filter.helper';
 import {UserService} from '../../../../services/user/user.service';
-import {isEqual} from 'lodash';
 import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatSelect} from '@angular/material/select';
 import {MatOptgroup, MatOption} from '@angular/material/core';
@@ -22,6 +21,10 @@ import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translate
   imports: [ReactiveFormsModule, MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, ShowTypePipe],
 })
 export class FilterComponent {
+  private router = inject(Router);
+  private showService = inject(ShowService);
+  private userService = inject(UserService);
+
   @Input() public route = '/shows/';
   @Input() public shows: Show[] = [];
 
@@ -38,13 +41,10 @@ export class FilterComponent {
 
   public owners: {key: string; value: string}[] = [];
 
-  public constructor(
-    private router: Router,
-    private showService: ShowService,
-    private userService: UserService,
-    activatedRoute: ActivatedRoute,
-    fb: UntypedFormBuilder
-  ) {
+  public constructor() {
+    const activatedRoute = inject(ActivatedRoute);
+    const fb = inject(UntypedFormBuilder);
+
     this.filterFormGroup = fb.group({
       time: 1,
       owner: null,
@@ -92,7 +92,7 @@ export class FilterComponent {
       map(owners => {
         return owners.sort(dynamicSort('value'));
       }),
-      distinctUntilChanged(isEqual),
+      distinctUntilChanged((left, right) => this.sameOwners(left, right)),
       map(_ => _ as {key: string; value: string}[])
     );
   };
@@ -104,4 +104,12 @@ export class FilterComponent {
     });
     await this.router.navigateByUrl(route);
   }
+
+  private sameOwners(left: {key: string; value: string}[], right: {key: string; value: string}[]): boolean {
+    if (left.length !== right.length) {
+      return false;
+    }
+
+    return left.every((owner, index) => owner.key === right[index]?.key && owner.value === right[index]?.value);
+  }
 }

src/app/modules/shows/list/list.component.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {combineLatest} from 'rxjs';
 import {Show} from '../services/show';
 import {fade} from '../../../animations';
@@ -22,8 +22,9 @@ import {SortByPipe} from '../../../widget-modules/pipes/sort-by/sort-by.pipe';
   imports: [RoleDirective, ListHeaderComponent, FilterComponent, CardComponent, ListItemComponent, RouterLink, AsyncPipe, SortByPipe],
 })
 export class ListComponent {
-  public shows$ = this.showService.list$();
-  public privateShows$ = this.showService.list$().pipe(map(show => show.filter(_ => !_.published)));
+  private showService = inject(ShowService);
+  private activatedRoute = inject(ActivatedRoute);
+
   public lastMonths$ = this.activatedRoute.queryParams.pipe(
     map(params => {
       const filterValues = params as FilterValues;
@@ -43,8 +44,9 @@ export class ListComponent {
       return filterValues?.showType;
     })
   );
+  public shows$ = this.showService.list$();
+  public privateShows$ = this.showService.list$().pipe(map(show => show.filter(_ => !_.published)));
   public queriedPublicShows$ = this.lastMonths$.pipe(switchMap(lastMonths => this.showService.listPublicSince$(lastMonths)));
-
   public fallbackPublicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
     map(([shows, lastMonths]) => {
       const startDate = new Date();
@@ -54,7 +56,6 @@ export class ListComponent {
       return shows.filter(show => show.published && !show.archived && show.date.toDate() >= startDate);
     })
   );
-
   public publicShows$ = combineLatest([this.queriedPublicShows$, this.fallbackPublicShows$, this.owner$, this.showType$]).pipe(
     map(([queriedShows, fallbackShows, owner, showType]) => {
       const shows = queriedShows.length > 0 || fallbackShows.length === 0 ? queriedShows : fallbackShows;
@@ -63,10 +64,5 @@ export class ListComponent {
     })
   );
 
-  public constructor(
-    private showService: ShowService,
-    private activatedRoute: ActivatedRoute
-  ) {}
-
   public trackBy = (index: number, show: unknown) => (show as Show).id;
 }