Convert observables to signals.

frontend/src/app/components/footer/footer.component.html

@@ -1,8 +1,8 @@
 <div i18n>
     <span class="copy-left">&copy;</span>
-    2016 - 2024 All rights reserved
+    2016 - 2026 All rights reserved
     -
-    2.1
+    2.2
     <a [routerLink]="['./']" matTooltip="Health checking will be available in future..." i18n-matTooltip>
         <mat-icon>favorite</mat-icon>
     </a>
@@ -11,4 +11,4 @@
     <mat-icon matTooltip="Documentation will be available in future..." i18n-matTooltip>menu_book</mat-icon>
     -
     <span i18n>Development realised by</span> Florian THIERRY
-</div>
+</div>

frontend/src/app/components/footer/footer.component.scss

@@ -12,6 +12,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        gap: .2em;
 
         .copy-left {
             transform: rotate(180deg);
@@ -28,4 +29,4 @@
             align-items: center;
         }
     }
-}
+}

frontend/src/app/components/footer/footer.component.ts

@@ -9,6 +9,4 @@ import { RouterModule } from '@angular/router';
     templateUrl: './footer.component.html',
     styleUrl: './footer.component.scss'
 })
-export class FooterComponent {
-
-}
+export class FooterComponent {}

frontend/src/app/components/publication-list/publication-list.component.html

@@ -1,4 +1,4 @@
-@for(publication of publications$ | async; track publication) {
+@for(publication of publications(); track publication.id) {
     <a [routerLink]="['/publications/' + publication.id]" class="publication">
         <img src="/api/pictures/{{ publication.illustrationId }}"/>
         <div class="body">
@@ -13,4 +13,4 @@
             </span>
         </div>
     </a>
-}
+}

frontend/src/app/components/publication-list/publication-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import {Component, input, Input} from "@angular/core";
 import { Publication } from "../../core/rest-services/publications/model/publication";
 import { Observable } from "rxjs";
 import { CommonModule } from "@angular/common";
@@ -12,6 +12,5 @@ import { MatTooltipModule } from "@angular/material/tooltip";
     imports: [CommonModule, RouterModule, MatTooltipModule]
 })
 export class PublicationListComponent {
-    @Input()
-    publications$!: Observable<Publication[]>;
-}
+    publications = input.required<Publication[]>();
+}

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

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

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

@@ -1,10 +1,11 @@
-import { Component, OnInit, inject } from '@angular/core';
+import {Component, OnInit, inject, Signal} from '@angular/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Observable } from 'rxjs';
 import { PublicationListComponent } from '../../components/publication-list/publication-list.component';
 import { Publication } from '../../core/rest-services/publications/model/publication';
 import { HomeService } from './home.service';
 import { CommonModule } from '@angular/common';
+import {toSignal} from "@angular/core/rxjs-interop";
 
 @Component({
     selector: 'app-home',
@@ -20,12 +21,12 @@ import { CommonModule } from '@angular/common';
 export class HomeComponent implements OnInit {
   private homeService = inject(HomeService);
 
-  get isLoading$(): Observable<boolean> {
-    return this.homeService.isLoading$;
+  get isLoading(): Signal<boolean> {
+    return toSignal(this.homeService.isLoading$, { initialValue: false });
   }
 
-  get publications$(): Observable<Publication[]> {
-    return this.homeService.publications$;
+  get publications(): Signal<Publication[]> {
+    return toSignal(this.homeService.publications$, { initialValue: [] });
   }
 
   ngOnInit(): void {