Convert observables to signals.

frontend/src/app/components/side-menu/side-menu.component.html

@@ -1,4 +1,4 @@
-<div class="menu {{ isOpenned ? 'displayed' : '' }}">
+<div class="menu {{ isOpened ? 'displayed' : '' }}">
     <h1>
         <a [routerLink]="['/home']">
             <img src="assets/images/codiki.png" alt="logo"/>
@@ -16,4 +16,4 @@
     <h2 i18n>Categories</h2>
     <app-categories-menu (categoryClicked)="close()"></app-categories-menu>
 </div>
-<div class="overlay {{ isOpenned ? 'displayed' : ''}}" (click)="close()"></div>
+<div class="overlay {{ isOpened ? 'displayed' : ''}}" (click)="close()"></div>

frontend/src/app/components/side-menu/side-menu.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component, signal} from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
@@ -18,13 +18,13 @@ import { MatRippleModule } from '@angular/material/core';
     ]
 })
 export class SideMenuComponent {
-  isOpenned: boolean = false;
+  isOpened = signal(false);
 
   open(): void {
-    this.isOpenned = true;
+    this.isOpened.set(true);
   }
 
   close(): void {
-    this.isOpenned = false;
+    this.isOpened.set(false);
   }
 }

frontend/src/app/components/submit-button/submit-button.component.html

@@ -1,12 +1,12 @@
 <button type="submit"
-        class="cod-button {{color}}"
+        class="cod-button {{color()}}"
-        [disabled]="disabled || requestPending"
+        [disabled]="disabled() || requestPending()"
         (click)="click.emit()"
         matRipple>
-    @if (requestPending) {
+    @if (requestPending()) {
-        <mat-spinner class="spinner {{color}}" [diameter]="25"></mat-spinner>
+        <mat-spinner class="spinner {{color()}}" [diameter]="25"></mat-spinner>
     }
     <span>
         <ng-content/>
     </span>
-</button>
+</button>

frontend/src/app/components/submit-button/submit-button.component.ts

@@ -1,5 +1,5 @@
 
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import {Component, EventEmitter, input, Input, output, Output, signal} from "@angular/core";
 import { MatRippleModule } from "@angular/material/core";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 
@@ -13,10 +13,9 @@ import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 ]
 })
 export class SubmitButtonComponent {
-    @Input() requestPending: boolean = false;
+    requestPending = input.required<boolean>();
-    @Input() label: string = '';
+    label = input<string>();
-    @Input() disabled: boolean = false;
+    disabled = input.required<boolean>();
-    @Input() color?: 'secondary';
+    color = input<'secondary' | undefined>('secondary');
-    @Output() click = new EventEmitter<void>();
+    click = output<void>();
   }
-  

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) {
+    @if (isLoaded()) {
-        <app-publication-list [publications$]="publications$"></app-publication-list>
+        <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[]> {
+    get publications(): Signal<Publication[]> {
-        return this.myPublicationsService.publications$;
+        return toSignal(this.myPublicationsService.publications$, { initialValue: [] });
     }
 
-    get isLoading$(): Observable<boolean> {
+    get isLoading(): Signal<boolean> {
-        return this.myPublicationsService.isLoading$;
+        return toSignal(this.myPublicationsService.isLoading$, { initialValue: false });
     }
 
-    get isLoaded$(): Observable<boolean> {
+    get isLoaded(): Signal<boolean> {
-        return this.myPublicationsService.isLoaded$;
+        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 => {