Currently, I am in the process of developing a messages page layout where users can select a message from a list on the left side and view its content on the right side, similar to how it is done in Outlook. Additionally, users should be able to reply or create new messages on the right side of the screen.
I have experimented with adjusting my routing module to automatically redirect to the first message, but encountered issues as this action was performed before retrieving the message list from the server. Another approach involved navigating within different components using my current route, yet I faced the same errors.
My current routing configuration is outlined below:
{
path: '',
children: [
{path: '', component: MessagesStartComponent},
{path: 'new', component: MessagesNewComponent},
{path: ':id', component: MessageContentComponent}
],
component: MessagesComponent,
canActivate: [AuthGuard]
}
The message list structure is displayed as follows:
<div class="list-group" *ngIf="messages">
<div *ngIf="messages.length > 0; else emptyMessages">
<app-message-item
*ngFor="let messageItem of messages; let i = index"
[message]="messageItem"
[index]="i">
</app-message-item>
</div>
<ng-template #emptyMessages>
<h3>No messages available for selected Customer or Contact</h3>
</ng-template>
</div>
To pre-select an item from the list, the following HTML code snippet can be utilized:
<a
style="cursor:pointer;"
[routerLink]="[index]"
routerLinkActive="active"
(click)="selectedMessageItem()"
class="list-group-item list-group-item-action">
<div>
...
</div>
</a>
The initial appearance of the user interface upon entering the screen is depicted in the following screenshot: enter image description here
The desired look of the user interface which I aim to achieve is illustrated in the linked screenshot: enter image description here