From f611b2bcd97f9ef708fbe8202176a835d7d1b59e Mon Sep 17 00:00:00 2001
From: dotansimha <dotansimha@gmail.com>
Date: Tue, 24 Jan 2017 15:37:03 +0200
Subject: [PATCH] Step 6.21: Update the template to use grouped messages

---
 src/pages/messages/messages.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/messages/messages.html b/src/pages/messages/messages.html
index f6afc94fa..8f0a31257 100644
--- a/src/pages/messages/messages.html
+++ b/src/pages/messages/messages.html
@@ -15,11 +15,15 @@
 
 <ion-content padding class="messages-page-content">
   <ion-scroll scrollY="true" class="messages">
-    <div *ngFor="let message of messages | async" class="message-wrapper">
+    <div *ngFor="let day of messagesDayGroups | async" class="day-wrapper">
+      <div *ngFor="let message of day.messages" class="message-wrapper">
         <div [class]="'message message-' + message.ownership">
           <div *ngIf="message.type == 'text'" class="message-content message-content-text">{{message.content}}</div>
           <span class="message-timestamp">{{ message.createdAt | amDateFormat: 'HH:mm' }}</span>
+        </div>
       </div>
+
+      <div *ngIf="!day.today" class="day-timestamp">{{day.timestamp}}</div>
     </div>
   </ion-scroll>
 </ion-content>