The problem is, first time when we land on the home-page, there are displayed all the news, and after we add a new news, in the end we need to have only the news with the creation date >= connection date. The array with the new news is properly set, but is not updated in the Html, because we still receive the news with the creation date < connection date.
ngOnInit() {
this.anonymous = true;
this.authentificationService.getInfosUtilisateur$()
.subscribe(infosUser => {
this.displayExternalTools = !!infosUser.profile;
if (infosUser.profile !== undefined && infosUser.profile !== 'UTL_ANONYME') {
this.getActualites(); // I'm getting all the news with this function
}
}
);
// Subscribe to the newNewsAdded event
this.actualiteService.newActualite.subscribe((newActualiteItem: Actualite) => {
this.checkForNewNews(newActualiteItem); //Here I'm adding the new items.
});
this.displayModalIfNeeded();
}
Get News function:
getActualites() {
this.actualiteService.getAll().subscribe(actualites => this.actualites = actualites);
}
This is the function when a new news is added, we only keep the news with the creation date > connection date. And the array is displayed properly in the console.log, the are only the new news.
checkForNewNews(newNewsItem: Actualite) {
const initialNewsLength = this.actualites.length;
// Add the new news item to the array
this.actualites.push(newNewsItem);
const updatedNewsLength = this.actualites.length;
if (updatedNewsLength > initialNewsLength) {
const newActualites = this.actualites.filter(newsItem => {
const newsItemDate = new Date(newsItem.dateCreation);
return newsItemDate >= this.connectionDate;
});
if (newActualites.length > 0) {
this.actualites.splice(0, this.actualites.length, ...newActualites);
}
console.log(this.actualites);
this.accueilModalService.resetModalDisplayCount();
}
}
Html modal populated by actualites array:
<div class="slider-modal-container" *ngIf="modalVisible">
<app-accueil-modal [actualitesItems]="actualites" (closeModal)="closeModal()"></app-accueil-modal>
</div>
