At this point, we are displaying the raw JSON content of the messages. Let's replace this with the Material List. We also need a link so that we can get back to the list of chat groups. Let's get started:
- Replace the ul element in the messages.component.html file with the following code:
<button mat-button [routerLink]="['/chat']">Back to Groups</button>
<mat-list>
<h3 mat-subheader>{{ group }}</h3>
<mat-list-item *ngFor="let message of messages | async">
{{ message.text }}
</mat-list-item>
</mat-list>
- The output of the preceding code is as follows:
Congratulations! You can now navigate between groups with ease. The messages list also looks cleaner.
Now, let's take a look at the possible improvements we can make in our spare time.