Convert observables to signals.

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

@@ -1,10 +1,10 @@
 <h1 i18n>Last publications</h1>
 @if ((isLoading())) {
     <h2 i18n>Publications loading...</h2>
-    <mat-spinner></mat-spinner>
+    <mat-spinner />
 } @else {
     @if (publications(); as publications) {
-        <app-publication-list [publications]="publications"></app-publication-list>
+        <app-publication-list [publications]="publications" />
     } @else {
         <h2 i18n>No any publication.</h2>
     }

frontend/src/app/pages/my-publications/my-publications.component.html

@@ -9,13 +9,13 @@
     +
 </a>
 
-@if ((isLoading$ | async) === true) {
+@if (isLoading()) {
     <h2 i18n>Publication loading...</h2>
     <mat-spinner></mat-spinner>
 } @else {
-    @if ((isLoaded$ | async) === true) {
-        <app-publication-list [publications$]="publications$"></app-publication-list>
+    @if (isLoaded()) {
+        <app-publication-list [publications]="publications()"></app-publication-list>
     } @else {
         <h2 i18n>There is no any publication...</h2>
     }
-}
+}

frontend/src/app/pages/my-publications/my-publications.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, OnInit } from "@angular/core";
+import {Component, inject, OnInit, Signal} from "@angular/core";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { MyPublicationsService } from "./my-publications.service";
 import { Observable } from "rxjs";
@@ -8,6 +8,7 @@ import { CommonModule } from "@angular/common";
 import { RouterModule } from "@angular/router";
 import { MatTooltipModule } from "@angular/material/tooltip";
 import { MatRippleModule } from "@angular/material/core";
+import {toSignal} from "@angular/core/rxjs-interop";
 
 
 @Component({
@@ -27,19 +28,19 @@ import { MatRippleModule } from "@angular/material/core";
 export class MyPublicationsComponent implements OnInit {
     private readonly myPublicationsService = inject(MyPublicationsService);
 
-    get publications$(): Observable<Publication[]> {
-        return this.myPublicationsService.publications$;
+    get publications(): Signal<Publication[]> {
+        return toSignal(this.myPublicationsService.publications$, { initialValue: [] });
     }
 
-    get isLoading$(): Observable<boolean> {
-        return this.myPublicationsService.isLoading$;
+    get isLoading(): Signal<boolean> {
+        return toSignal(this.myPublicationsService.isLoading$, { initialValue: false });
     }
 
-    get isLoaded$(): Observable<boolean> {
-        return this.myPublicationsService.isLoaded$;
+    get isLoaded(): Signal<boolean> {
+        return toSignal(this.myPublicationsService.isLoaded$, { initialValue: false });
     }
 
     ngOnInit(): void {
-        this.myPublicationsService.loadAuthenticatedUserPublications();    
+        this.myPublicationsService.loadAuthenticatedUserPublications();
     }
-}
+}

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

@@ -8,7 +8,7 @@
             <header>
                 <h1>{{ publication.title }}</h1>
                 <h2>{{ publication.description }}</h2>
-                @if (isAuthorAndUserEquals) {
+                @if (isAuthorAndUserEquals()) {
                     <a [routerLink]="['edit']"
                         class="button action"
                         matTooltip="Click to edit the publication"

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

@@ -38,7 +38,7 @@ export class PublicationComponent implements OnInit, OnDestroy {
   private paramMapSubscription?: Subscription;
   private afterDialogCloseSubscription?: Subscription;
   isLoading = signal(false);
-  isAuthorAndUserEquals: boolean = false;
+  isAuthorAndUserEquals = signal(false);
   publication = signal<Publication | null>(null);
 
   ngOnInit(): void {
@@ -53,7 +53,7 @@ export class PublicationComponent implements OnInit, OnDestroy {
             this.publicationRestService.getById(publicationId)
                 .then(publication => {
                   this.publication.set(publication);
-                  this.isAuthorAndUserEquals = this.authenticationService.getAuthenticatedUser()?.id === this.publication()?.author.id;
+                  this.isAuthorAndUserEquals.set(this.authenticationService.getAuthenticatedUser()?.id === this.publication()?.author.id);
                   setTimeout(() => Prism.highlightAll(), 100);
                 })
                 .catch(error => {