Use signals on home page.
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user