Fixing Angular 21 by migrating all values by signals. (#11)

2026-02-03 15:07:55 +01:00
parent 1ca2f872f7
commit 0cce8b2982
102 changed files with 4102 additions and 4852 deletions
@@ -1,51 +1,39 @@
-import { CommonModule } from "@angular/common";
-import { Component, inject, OnDestroy, OnInit } from "@angular/core";
-import { MatProgressSpinner } from "@angular/material/progress-spinner";
-import { ActivatedRoute } from "@angular/router";
-import { Observable, Subscription } from "rxjs";
-import { PublicationListComponent } from "../../components/publication-list/publication-list.component";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { SearchPublicationsService } from "./search-publications.service";
+import {CommonModule} from "@angular/common";
+import {Component, effect, inject} from "@angular/core";
+import {MatProgressSpinner} from "@angular/material/progress-spinner";
+import {ActivatedRoute} from "@angular/router";
+import {PublicationListComponent} from "../../components/publication-list/publication-list.component";
+import {SearchPublicationsService} from "./search-publications.service";
+import {toSignal} from "@angular/core/rxjs-interop";

@Component({
-    selector: 'app-search-publications',
-    templateUrl: './search-publications.component.html',
-    styleUrl: './search-publications.component.scss',
-    imports: [CommonModule, MatProgressSpinner, PublicationListComponent],
-    providers: [SearchPublicationsService]
+  selector: 'app-search-publications',
+  templateUrl: './search-publications.component.html',
+  styleUrl: './search-publications.component.scss',
+  imports: [CommonModule, MatProgressSpinner, PublicationListComponent],
+  providers: [SearchPublicationsService]
 })
-export class SearchPublicationsComponent implements OnInit, OnDestroy {
-    private searchPublicationsService = inject(SearchPublicationsService);
-    private activatedRoute = inject(ActivatedRoute);
-    private queryParamsSubscription?: Subscription;
+export class SearchPublicationsComponent {
+  private searchPublicationsService = inject(SearchPublicationsService);
+  private activatedRoute = inject(ActivatedRoute);
+  publications = this.searchPublicationsService.publications;
+  isLoading = this.searchPublicationsService.isLoading;
+  isLoaded = this.searchPublicationsService.isLoaded;

-    ngOnInit(): void {
-        this.queryParamsSubscription = this.activatedRoute.queryParamMap
-            .subscribe(params => {  
-                const categoryId = params.get('category-id');
-                if (categoryId) {
-                    this.searchPublicationsService.loadPublications(`category_id=${categoryId}`);
-                }
-                const query = params.get('query')
-                if (query) {
-                    this.searchPublicationsService.loadPublications(query);
-                }
-            });
-    }
-
-    ngOnDestroy(): void {
-        this.queryParamsSubscription?.unsubscribe();
-    }
-
-    get publications$(): Observable<Publication[]> {
-        return this.searchPublicationsService.publications$;
-    }
-
-    get isLoading$(): Observable<boolean> {
-        return this.searchPublicationsService.isLoading$;
-    }
-
-    get isLoaded$(): Observable<boolean> {
-        return this.searchPublicationsService.isLoaded$;
-    }
-}
+  constructor() {
+    const queryParams = toSignal(this.activatedRoute.queryParamMap);
+    effect(() => {
+      let params = queryParams();
+      if (params) {
+        const categoryId = params.get('category-id');
+        if (categoryId) {
+          this.searchPublicationsService.loadPublications(`category_id=${categoryId}`);
+        }
+        const query = params.get('query')
+        if (query) {
+          this.searchPublicationsService.loadPublications(query);
+        }
+      }
+    });
+  }
+}