Electron Projects

Updating the message list interface

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:

1. 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>

2. The output of the preceding code is as follows:

Congratulations! You can now navigate between groups ...