Angular 2 - How to reverse firebase list after adding new item

Question

I'm searching for a way to reverse my firebase list in real time.

for example : I get this firebase list:

{apple, orange, banana}; == After reverse => {banana, orange, apple}

And if I add new item (without refresh the page), my list should be like this :

{apple, orange, banana, other} == reversed => {other, banana, orange, apple}

I used this code to try to reverse the list but there is an error:

    <div *ngFor="let f of fruitsList | reverse async">

Also I checked this one but the list didn't reverse

    <div *ngFor="let f of fruitsList | async reverse">

I checked this link [ https://stackoverflow.com/questions/40293539/is-it-possible-to-reverse-a-firebase-list ] but not as I want

It's fine when I run the application but when I add any new item the list shown as a picture.

Note: FruitList defined as

    Public fruitList: FirebaseListObservable<any[]>

Answer 1

try

<div *ngFor="let f of fruitsList.reverse() | async ">

Thanks, O

This would work for a simple array. For a FireBaseObservable then you would want to do something like this (taken from here https://angularfirebase.com/snippets/how-to-reverse-an-observable-array-in-angular-angularfire2-firebaselistobservable/) Create a pipe like this

    import { Pipe, PipeTransform } from '@angular/core';    
    @Pipe({
         name: 'reverse'
     })
     export class ReversePipe implements PipeTransform {

     transform(value) {

     if (!value) return;
             return value.reverse();
        }
    }

and use it like this

    <div *ngFor="let f of fruitsList | async | reverse">