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

@@ -1,8 +1,8 @@
-@if (isLoading) {
+@if (isLoading()) {
     <h2 i18n>Publication content loading...</h2>
     <mat-spinner></mat-spinner>
 } @else {
-    @if (publication) {
+    @if (publication(); as publication) {
         <div class="card">
             <img src="/api/pictures/{{ publication.illustrationId }}" />
             <header>
@@ -32,7 +32,7 @@
                 @if (isAuthorAndUserEquals) {
                     <button type="button"
                         (click)="deletePublication()"
-                        matTooltip="Click to delete the publication" 
+                        matTooltip="Click to delete the publication"
                         matTooltipPosition="left"
                         matRipple
                         i18n-matTooltip>
@@ -47,4 +47,4 @@
             <h1 i18n>Publication failed to load...</h1>
         </div>
     }
-}
+}

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

@@ -1,5 +1,5 @@
 import { CommonModule, Location } from '@angular/common';
-import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import {Component, OnDestroy, OnInit, inject, signal} from '@angular/core';
 import { MatRippleModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatIcon } from '@angular/material/icon';
@@ -37,9 +37,9 @@ export class PublicationComponent implements OnInit, OnDestroy {
   private readonly snackBar = inject(MatSnackBar);
   private paramMapSubscription?: Subscription;
   private afterDialogCloseSubscription?: Subscription;
-  isLoading: boolean = false;
+  isLoading = signal(false);
   isAuthorAndUserEquals: boolean = false;
-  publication?: Publication;
+  publication = signal<Publication | null>(null);
 
   ngOnInit(): void {
     this.paramMapSubscription = this.activatedRoute
@@ -48,12 +48,12 @@ export class PublicationComponent implements OnInit, OnDestroy {
           const publicationId = params.get('publicationId');
 
           if (publicationId) {
-            this.isLoading = true;
+            this.isLoading.set(true);
 
             this.publicationRestService.getById(publicationId)
                 .then(publication => {
-                  this.publication = publication;
-                  this.isAuthorAndUserEquals = this.authenticationService.getAuthenticatedUser()?.id === this.publication.author.id;
+                  this.publication.set(publication);
+                  this.isAuthorAndUserEquals = this.authenticationService.getAuthenticatedUser()?.id === this.publication()?.author.id;
                   setTimeout(() => Prism.highlightAll(), 100);
                 })
                 .catch(error => {
@@ -62,7 +62,7 @@ export class PublicationComponent implements OnInit, OnDestroy {
                   console.error(errorMessage, error);
                 })
                 .finally(() => {
-                  this.isLoading = false;
+                  this.isLoading.set(false);
                 });
           }
         });
@@ -86,8 +86,9 @@ export class PublicationComponent implements OnInit, OnDestroy {
 
     this.afterDialogCloseSubscription = dialogRef.afterClosed()
       .subscribe(response => {
-        if (response && this.publication?.id) {
-          this.publicationRestService.delete(this.publication.id);
+        const publication = this.publication();
+        if (response && publication?.id) {
+          this.publicationRestService.delete(publication.id);
           this.snackBar.open($localize`Publication deleted`, $localize`Close`, { duration: 5000 });
           this.location.back();
         }