In this section, we are going to redirect users to a dedicated Messages page when they click the group entry. Let's get started:

1. Run the following command to generate a Messages component:

      ng g component messages

2. The output of the preceding command should be similar to the following:

      CREATE src/app/messages/messages.component.scss (0 bytes)
      CREATE src/app/messages/messages.component.html (23 bytes)
      CREATE src/app/messages/messages.component.spec.ts (642 bytes)
      CREATE src/app/messages/messages.component.ts (278 bytes)
      UPDATE src/app/app.module.ts (1477 bytes)

3. Next, you need to update the app-routing.module.ts file. We are doing this because we need to register a new route that we're going to map to the MessagesComponent we have just generated.
4. Let's use a URL path such as chat/:group/messages, where :group is going to be the name of the chat group that Angular substitutes at runtime.
5. Update the routes collection using the following code:

      import { MessagesComponent } from './messages/messages.component';

      const routes: Routes = [
        {
          path: 'login',
          component: LoginComponent
        },
        {
          path: 'chat',
          component: ChatComponent
        },
        {
          path: 'chat/:group/messages',
          component: MessagesComponent
        }
      ];

6. Now, it's time to update the HTML templates to perform a redirect. Add the routerLink directive to the chat.component.html template, as shown in the following code:

      <mat-list>
        <h3 mat-subheader>Groups</h3>
      
        <mat-list-item
          *ngFor="let group of groups | async"
          [routerLink]="[group.name, 'messages']"
        >
          <mat-icon mat-list-icon>chat</mat-icon>
          <h4 mat-line>{{ group.name }}</h4>
          <p mat-line>{{ group.description }}</p>
        </mat-list-item>
      </mat-list>

7. Let's improve the styling a bit. It would be nice to at least change the cursor so that users understand that the element is clickable and can be used for navigation. Use the following code for the content of chat.component.scss:

      .mat-list-item {
        cursor: pointer;

        &:hover h4 {
          text-decoration: underline;
        }
      }

Here, we've changed the cursor to a pointer and also underlined the group name. Feel free to improve the look and feel of the list elements further as you see fit.

8. Restart the application and click on any of the groups. You should end up on the Messages page:

Notice how the browser URL changes to reflect the group name's value. Try doing the same with other groups to ensure that the result is what you expected.

In the next section, we are going to allow users to post and view messages.