At this point, we have an initial structure for our groups. Now, we need each of the group entries to contain a list of messages. We don't have support for posting messages to the server, so let's update the database directly and provide some dummy data for one of the groups. We will replace this dummy data with real messages later in this chapter. Let's get started:

1. Switch to the Firebase console and provide the messages object for the root entry, as shown in the following screenshot:

As you can see, we are keeping the data in separate branches to simplify real-time access. The groups branch contains information about the chat groups, while the messages branch stores the actual user messages. Each message object has a reference to the group. This is a very minimalistic implementation and is purely for demonstration purposes.

2. Now, it's time to display this message in our Angular application. As you may recall, we have a route template called chat/:group/messages where :group is dynamic.
3. Our next task is to access the :group portion of the URL because we need to know the name of the group before asking for the corresponding messages. We can get the value of the group parameter using ActivatedRoute.
4. Update the messages.component.ts file so that it contains the following code:

      import { ActivatedRoute } from '@angular/router';

      @Component({...})
      export class MessagesComponent implements OnInit {
        group = '';
        constructor(private route: ActivatedRoute) {}

        ngOnInit() {
          this.route.params.subscribe(params => {
            this.group = params.group;
          });
        }
      }

5. Next, we need to import AngularFireDatabase and Observable, similar to what we did with the groups:

      import { AngularFireDatabase } from '@angular/fire/database';
      import { Observable } from 'rxjs';

      @Component({...})
      export class MessagesComponent implements OnInit {
        messages: Observable<any>;

        constructor(
          private route: ActivatedRoute,
          private firebase: AngularFireDatabase
        ) {}

        ngOnInit() {
          // ...
        }
      }

This time, however, we should use the AngularFire API to filter out the messages that belong to our current group.

6. Update ngOnInit, as shown in the following code:

      ngOnInit() {
          this.route.params.subscribe(params => {
            this.group = params.group;

            if (this.group) {
              this.messages = this.firebase
                .list('messages', ref => ref.orderByChild('group')
                .equalTo(this.group))
                .valueChanges();
            }
          });
      }

7. Finally, update the HTML template with a simple list element:

      <ul>
        <li *ngFor="let message of messages | async">
          {{ message | json }}
        </li>
      </ul>

8. Reload the page or restart the web server and navigate to the first chat group:

As you can see, the messages are associated with the room1 group. Congratulations on achieving this significant milestone!

If you open the developer tools, you may see a few warnings about performance:

In the next section, we are going to address these performance warnings.