Use signals ont publication creation and update pages.

frontend/src/app/pages/publication-creation/publication-creation.component.html

@@ -1,7 +1,9 @@
-<app-publication-edition
+@if (publicationIsNotNull()) {
+    <app-publication-edition
         title="Creation of a new publication"
-    [publication]="publication" 
+        [publication]="publication()!!"
         [isSaving$]="isSaving$"
         (publicationSave)="onPublicationSave($event)"
         i18n-title>
-</app-publication-edition>
+    </app-publication-edition>
+}

frontend/src/app/pages/publication-creation/publication-creation.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, OnInit } from "@angular/core";
+import { Component, computed, inject, OnInit, signal } from "@angular/core";
 import { PublicationEditionComponent } from "../../components/publication-edition/publication-edition.component";
 import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
 import { ActivatedRoute, Router } from "@angular/router";
@@ -26,7 +26,8 @@ export class PublicationCreationComponent implements OnInit {
     private readonly snackBar = inject(MatSnackBar);
     private isSavingSubject = new BehaviorSubject<boolean>(false);
     private subscriptions: Subscription[] = [];
-    publication!: Publication;
+    publication = signal<Publication | undefined>(undefined);
+    publicationIsNotNull = computed(() => !!this.publication());
 
     get isSaving$(): Observable<boolean> {
         return this.isSavingSubject.asObservable();
@@ -40,7 +41,7 @@ export class PublicationCreationComponent implements OnInit {
                 name: authenticatedUser.pseudo,
                 image: authenticatedUser.photoId ?? ''
             };
-            this.publication = {
+            const newPublication: Publication = {
                 id: '',
                 key: '',
                 title: '',
@@ -52,6 +53,7 @@ export class PublicationCreationComponent implements OnInit {
                 categoryId: '',
                 author
             };
+            this.publication.set(newPublication);
         }
     }
 

frontend/src/app/pages/publication-update/publication-update.component.html

@@ -1,4 +1,4 @@
-@if ((isLoading$ | async) == true) {
+@if (isLoading()) {
     <h2 i18n>Loading publication to edit...</h2>
     <mat-spinner></mat-spinner>
 } 

frontend/src/app/pages/publication-update/publication-update.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule, Location } from '@angular/common';
-import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit, signal } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
@@ -41,21 +41,17 @@ export class PublicationUpdateComponent implements OnInit, OnDestroy {
   private readonly location = inject(Location);
   private readonly router = inject(Router);
   private readonly snackBar = inject(MatSnackBar);
-  private isLoadingSubject = new BehaviorSubject<boolean>(false);
   private isSavingSubject = new BehaviorSubject<boolean>(false);
   private subscriptions: Subscription[] = [];
+  isLoading = signal(false);
   publication: Publication | undefined;
 
-  get isLoading$(): Observable<boolean> {
-    return this.isLoadingSubject.asObservable();
-  }
-
   get isSaving$(): Observable<boolean> {
     return this.isSavingSubject.asObservable();
   }
 
   ngOnInit(): void {
-    this.isLoadingSubject.next(true);
+    this.isLoading.set(true);
     this.activatedRoute.paramMap.subscribe(params => {
         const publicationId = params.get('publicationId');
         if (publicationId == undefined) {
@@ -71,7 +67,7 @@ export class PublicationUpdateComponent implements OnInit, OnDestroy {
                 this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
                 console.error(errorMessage, error)
             })
-            .finally(() => this.isLoadingSubject.next(false));
+            .finally(() => this.isLoading.set(false));
         }
       });
   }