When we defined the groups property earlier in this chapter, we used the valueChanges API to get an Observable instance. This Observable helps us build a list that reacts to changes. Each time the underlying data changes, the Material List component is going to redraw everything.
Let's see if that behavior works with our chat application:
- Run the application and ensure that you are facing the group list.
- Switch to the Firebase console and navigate to the Database section.
For better visibility, I recommend having both tabs open side by side so that you see the changes we make on both pages simultaneously.
- Add a new group entry to the list of groups, as shown in the following screenshot:
- When you are ready, click the Add button to confirm these changes. Notice how the Chats page updates in real time and that you can see the newly added entry in the list:
As you can see, Firebase provides compelling features for automatic data synchronization across all clients.
In the next section, we are going to make the group list items clickable and redirect users to the corresponding chat room details.