Изменение порядка чатов в приложении чата на ионной базе

Question

У меня есть приложение ионного чата, которое получает сообщения чата от firebase.Все работает нормально, но я хочу сделать так, чтобы каждое новое сообщение скользило в верхней части списка, как в WhatsApp.Мой список чатов - это массив, который обновляется из firebase, но мне нужен способ переупорядочить этот массив при получении нового сообщения.Спасибо.

//my ts 

  ionViewWillEnter() {
    this.chatService.getAllMatchMessages();
    this.chatService.getAllTypers();
    this.firebaseService.getOnlinePresence();
    this.RequestService.getTempFriends();
    this.myTempFriends = [];
    this.events.subscribe("tempFriends", () => {
      this.myTempFriends = [];
      this.myTempFriends = this.RequestService.myTempFriends;
      this.temparr = this.RequestService.myTempFriends;

      this.tempFriendsuid = [];
      this.tempFriendsuid = this.myTempFriends.map(personObj => personObj.uid);

      for (var k in this.tempFriendsuid) {
        this.personalMessages
          .child(this.tempFriendsuid[k])
          .on("value", snapshot => {
            this.allMessages = [];
            this.messages = snapshot.val();
            this.allMessages.push(this.messages);
            const temp1 = this.objectToArray(
              this.allMessages[this.allMessages.length - 1]
            );
            if (temp1 == null) {
              return;
            } else {
              this.lastMessage = temp1[temp1.length - 1].message;
              this.lastMessageTime = temp1[temp1.length - 1].time;
            }
          });
      }
    });
  }

////////////////////////////////////////////////////////
//my html
 <ion-item *ngFor="let item of myTempFriends;let i= index"
      (click)="matchChat(item)">
      <ion-avatar item-left>
        <img src="../assets/imgs/background.jpg">
      </ion-avatar>
      <div class="time">
        <h3>{{item.username}} is {{onlineStatusArray[i]}}</h3>
        <p *ngIf="lastMsgArr[i]">{{lastMsgArr[i][lastMsgArr[i].length-1].time}}</p>
      </div>

      <div *ngIf="lastMsgArr[i] && typersArr[i] === false">
        <ion-icon class="msgIcon" name="done-all"
          *ngIf="lastMsgArr[i][lastMsgArr[i].length-1].sentBy==userId &&
          lastMsgArr[i][lastMsgArr[i].length-1][userId]==0 &&
          lastMsgArr[i][lastMsgArr[i].length-1][item.uid]==0"></ion-icon>
        <ion-icon class="msgIcon" name="water"
          *ngIf="lastMsgArr[i][lastMsgArr[i].length-1].sentBy==item.uid &&
          lastMsgArr[i][lastMsgArr[i].length-1][item.uid]==0 &&
          lastMsgArr[i][lastMsgArr[i].length-1][userId]==1"></ion-icon>
        <ion-icon class="msgIcon" name="checkmark"
          *ngIf="lastMsgArr[i][lastMsgArr[i].length-1].sentBy==userId &&
          lastMsgArr[i][lastMsgArr[i].length-1][item.uid]==1 &&
          lastMsgArr[i][lastMsgArr[i].length-1][userId]==0"></ion-icon>
        <p id="lastMessage" style="display:inline-block">{{lastMsgArr[i][lastMsgArr[i].length-1].message}}</p>
      </div>

      <div *ngIf="typersArr[i] === true">
          <p id="lastMessage" style="display:inline-block">typing...</p>
      </div>
    </ion-item>