At first, I thought the reason for not displaying anything initially was due to it not being async and returning an empty array. Everything worked fine without the pipe, but the posts weren't shown on startup. After submitting a post, all the posts appeared and were sorted.
The problem arises when I refresh the page because the posts don't show up. However, if I submit a new post or navigate to a different route and then come back, they appear.
Below is the HTML code snippet:
<li *ngFor="let item of postContainers | orderByPipe">
I attempted using: postContainers | orderByPipe | async But it seems that the async part doesn't have any effect.
Using only the following works fine as it displays the posts on startup, but they are not sorted:
<li *ngFor="let item of postContainers">
This is how my custom pipe looks like:
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'orderByPipe'
})
export class OrderByPipe implements PipeTransform{
transform(array: Array<string>, args: string): Array<string> {
if(!array || array === undefined || array.length === 0) return null;
array.sort((a: any, b: any) => {
if (this.convertDate(a.date) < this.convertDate(b.date)) {
return -1;
} else if (this.convertDate(a.date) > this.convertDate(b.date)) {
return 1;
} else {
return 0;
}
});
return array;
}
convertDate(timestamp: any) {
return new Date(timestamp*1000);
}
}
Any assistance would be greatly appreciated.