Use signals on home page.

This commit is contained in:
Florian THIERRY
2024-09-25 08:59:32 +02:00
parent 778a92fd5e
commit cfa3015a7b
2 changed files with 18 additions and 9 deletions

View File

@@ -1,5 +1,5 @@
<h1 i18n>Last publications</h1>
@if ((isLoading$ | async) === true) {
@if (isLoading()) {
<h2 i18n>Publications loading...</h2>
<mat-spinner></mat-spinner>
} @else {

View File

@@ -1,6 +1,6 @@
import { Component, OnInit, inject } from '@angular/core';
import { Component, OnDestroy, OnInit, inject, signal } from '@angular/core';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { Observable } from 'rxjs';
import { Observable, Subscription } 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';
@@ -18,18 +18,27 @@ import { CommonModule } from '@angular/common';
styleUrl: './home.component.scss',
providers: [HomeService]
})
export class HomeComponent implements OnInit {
export class HomeComponent implements OnInit, OnDestroy {
private homeService = inject(HomeService);
get isLoading$(): Observable<boolean> {
return this.homeService.isLoading$;
}
private isLoadingSubscription?: Subscription;
private publicationsSubscription?: Subscription;
isLoading = signal(false);
publicationsIsEmpty = signal(true);
get publications$(): Observable<Publication[]> {
return this.homeService.publications$;
}
ngOnInit(): void {
this.isLoadingSubscription = this.homeService.isLoading$
.subscribe(isLoading => this.isLoading.set(isLoading));
this.publicationsSubscription = this.homeService.publications$
.subscribe(publications => this.publicationsIsEmpty.set(publications.length > 0));
this.homeService.startLatestPublicationsRetrieving();
}
ngOnDestroy(): void {
this.isLoadingSubscription?.unsubscribe();
this.publicationsSubscription?.unsubscribe();
}
}