frontend - Angular chat not fetching the messages

Question

Hey Awesome peeps i was designing a chat in one of my projects using enlink theme and i can send the message and fetch the user list but its not fetching the conversations.

here is the part that i fetch the conversation in chat component.html

   <div class="container-fluid p-h-0">
<div class="chat chat-app row">
    <div class="chat-list">
        <div class="chat-user-tool">
            <i nz-icon nzType="search" theme="outline" class="search-icon p-r-10 font-size-20"></i>
            <input placeholder="Search...">
        </div>
        <div class="chat-user-list">
            <nz-list [nzDataSource]="chatList" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
                <ng-template #item let-item let-index="index">
                    <a (click)="selectChat(item.userName)" [username]="item.userName">
                        <nz-list-item class="p-h-25" [ngClass]="{'active': index == chatId}">
                            <div class="media align-items-center">
                                <div>
                                    <nz-avatar class="shadow" nzIcon="user" [nzSrc]="item.photos[0]?.url"></nz-avatar>
                                </div>
                                <div class="p-l-15">
                                    <h5 class="m-b-0" *ngIf="(accountService.currentUser$ | async)">
                                        {{item.userName}}
                          <nz-badge *ngIf="(presence.onlineUsers$ | async).includes(item.userName)" nzStatus="success"></nz-badge>
                                    </h5>                                  
                                    <ng-container *ngFor="let item of item.msg; let last = last">
                                        <p *ngIf="last" class="msg-overflow m-b-0 text-muted font-size-13">
                                            {{item.text}}
                                        </p>
                                    </ng-container>
                                </div>
                            </div>
                        </nz-list-item>
                    </a>
                </ng-template>
            </nz-list>
        </div>    
    </div>
    <div class="chat-content" [ngClass]="{'open': isContentOpen}">
        <div class="conversation">
            <div class="conversation-wrapper">
                <div class="conversation-header justify-content-between">
                    <ng-container *ngFor="let item of chatList" >
                        <div class="media align-items-center" *ngIf="chatId == item.userName">
                            <a [routerLink]="" (click)="closeChatContent()" class="m-r-20 d-md-none d-block text-dark font-size-18 m-t-5" >
                                <i nz-icon nzType="left-circle" theme="outline"></i>
                            </a>
                            <div>
                                <nz-avatar class="shadow" nzIcon="user" [nzSrc]="item.photos[0]?.url"></nz-avatar>
                            </div>
                            <div class="p-l-15">
                                <h6 class="m-b-0">{{item.userName}}</h6>
                                <p class="m-b-0 text-muted font-size-13" *ngIf="(presence.onlineUsers$ | async).includes(item.userName)">
                                    <nz-badge nzStatus="success"></nz-badge>
                                    <span>Online</span>
                                </p>
                                <p class="m-b-0 text-muted font-size-13" *ngIf="!(presence.onlineUsers$ | async).includes(item.userName)">
                                    <nz-badge nzStatus="default"></nz-badge>
                                    <span>Offline</span>
                                </p>
                            </div>
                        </div>
                    </ng-container>
                    <div>
                        <a class="text-dark font-size-18" [nzDropdownMenu]="chatSetting" nz-dropdown [nzTrigger]="'click'" nzPlacement="bottomRight">
                            <i nz-icon nzType="setting" theme="outline"></i>
                        </a>
                        <nz-dropdown-menu #chatSetting="nzDropdownMenu">
                            <ul nz-menu>
                                <li nz-menu-item>1st menu item</li>
                                <li nz-menu-item>2nd menu item</li>
                                <li nz-menu-item>3rd menu item</li>
                            </ul>
                        </nz-dropdown-menu>
                    </div>
                </div>
                <div class="conversation-body" #scrollBottom *ngIf="messages.length > 0" >
                    <ng-container *ngFor="let item of messages">
                        <div *ngIf="chatId == item.recipientUserName">
                            <div class="msg" [ngClass]="{'msg-recipient': item.recipientUserName, 'msg-sent': item.senderUserName}" >                                  

                                <div class="bubble" *ngIf="item.content.length > 1" [ngClass]="{'m-l-50': item.senderUserName.length == 0}">
                                    <div class="bubble-wrapper" [ngClass]="{'p-5': item.senderUserName == 'image'}">
                                        <span *ngIf="item.content">{{item.content}}</span>
                                        <img *ngIf="item.senderUserName == 'image'" [src]="item.content" [alt]="item.content">
                                        <div *ngIf="item.senderUserName == 'file'" class="d-flex align-items-center msg-file">
                                            <i class="font-size-25" nz-icon nzType="file" theme="outline"></i>
                                            <span class="m-l-10 font-weight-semibold text-link pointer">
                                                <u>{{item.content}}</u>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="font-weight-semibold font-size-12" *ngIf="item.dateRead.length > 1">
                                    {{item.dateRead | date}}
                                </div>
                            </div>
                        </div>
                    </ng-container>
                </div>    
                <div class="conversation-footer">
                    <form #messageForm="ngForm" (ngSubmit)="sendMessage()" autocomplete="off">

                    <input 
                    name="messageContent"
                    required
                    [(ngModel)]="messageContent" 
                    class="chat-input" type="text" 
                    placeholder="Type a message..." (keydown.enter)="sendMessage();$event.preventDefault()">
                    <ul class="list-inline d-flex align-items-center m-b-0">
                        <li class="list-inline-item">
                            <a class="text-gray font-size-20" nz-tooltip nzTooltipTitle="Emoji">
                                <i nz-icon nzType="smile" theme="outline"></i>
                            </a>
                        </li> 
                        <li class="list-inline-item">
                            <a class="text-gray font-size-20" nz-tooltip nzTooltipTitle="Attachment">
                                <i nz-icon nzType="paper-clip" theme="outline"></i>
                            </a>
                        </li>    
                        <li class="list-inline-item">
                            <button class="d-none d-md-block" nz-button nzType="primary" type="submit">
                                <span class="m-r-10">Send</span>
                                <p  *ngFor="let item of messages">{{item.content}}</p>
                                <i class="far fa-paper-plane"></i>
                            </button>
                            <!-- <a class="text-gray font-size-20 d-md-none d-block" (click)="sendMsg()" nz-tooltip nzTooltipTitle="Attachment">
                                <i nz-icon nzType="paper-clip" theme="outline"></i>
                            </a> -->
                        </li>
                    </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>        

and here is the chat.component.ts file i used a template for the html as i said the sending message fetching the users works fine it is the fetching the conversations i am having a problem wit.

 import { Component, AfterViewChecked, ElementRef, ViewChild, OnInit, Input, OnDestroy } from '@angular/core'
import { NgForm } from '@angular/forms';
import { take } from 'rxjs/operators';
import { Message } from 'src/app/shared/interfaces/message';
import { Staff } from 'src/app/shared/interfaces/staff';
import { StaffParams } from 'src/app/shared/interfaces/staff-params';
import { User } from 'src/app/shared/interfaces/user.type';
import { AuthenticationService } from 'src/app/shared/services/authentication.service';
import { MessageService } from 'src/app/shared/services/message.service';
import { PresenceService } from 'src/app/shared/services/presence.service';
import { StaffService } from 'src/app/shared/services/staff.service';
import { Chat } from '../../shared/interfaces/chat.type';
import { AppsService } from '../../shared/services/apps.service';

@Component({
    templateUrl: './chat.component.html'
})

export class ChatComponent implements OnInit, AfterViewChecked, OnDestroy {
    messageForm!: NgForm;
    username!: string;
  // messages: Message[] = [];
    messages: Message[] = [];
    @ViewChild('scrollBot

Answer 1

Waitting for answers