Rendering the group list

From a web interface perspective, we have a fully functional Login component that navigates users to the /chat page, which contains the chat works! text label. Let's replace this content with a list of chat groups that users can join:

1. Import the AngularFireDatabaseModule module into the main application module using the following code:

      import { AngularFireDatabaseModule } from '@angular/fire/database';

      @NgModule({
        // ...
        imports: [
          // ...
          AngularFireModule.initializeApp(environment.firebaseConfig),
          AngularFireAuthModule,
          AngularFireDatabaseModule
        ],
        // ...
      })
      export class AppModule {}

The preceding code is going to enable additional APIs so that we can communicate with Firebase's databases.

2. Next, import the following classes into the chat.component...