How to use MDBootstrap Chat dynamically? - asp.net

Question

I am trying to user MdBootstrap 5's chat feature in my app.
This is what I have tried in the template but the thing is I need to refresh the page for it to work even though I am using SignalR in my backend.
<section style="background-color: #eee;">
<div class="container py-5">
<div class="row d-flex justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-6">
<div class="card" id="chat2">
<div class="card-header d-flex justify-content-between align-items-center p-3">
<h5 class="mb-0">Chat</h5>
<button type="button" class="btn btn-primary btn-sm" data-mdb-ripple-color="dark">
Let's Chat
App
</button>
</div>
<div class="card-body" data-mdb-perfect-scrollbar="true" style="position: relative; height: 400px">
<div *ngFor="let message of (messageService.messageThread$ | async)">
<ng-container *ngIf="message.senderUsername !== currentUser!.userName">
<div class="d-flex flex-row justify-content-start">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
alt="avatar 1" style="width: 45px; height: 100%;">
<div>
<p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">ouweee {{message.content}}</p>
<p class="small ms-3 mb-3 rounded-3 text-muted">{{message.messageSent | date:'medium'}}</p>
<span class="text-danger" *ngIf="!message.dateRead">(unread)</span>
<span class="text-success" *ngIf="message.dateRead">(read {{message.dateRead + 'Z' | timeago}})</span>
</div>
</div>
</ng-container>
<ng-container *ngIf="message.senderUsername === currentUser!.userName">
<div class="d-flex flex-row justify-content-end mb-4 pt-1">
<div>
<p class="small p-2 me-3 mb-1 text-white rounded-3 bg-primary"> Nouwweee {{message.content}}</p>
<p class="small me-3 mb-3 rounded-3 text-muted d-flex justify-content-end">{{message.messageSent | date:'medium'}}</p>
<span class="text-danger" *ngIf="!message.dateRead">(unread)</span>
<span class="text-success" *ngIf="message.dateRead">(read {{message.dateRead + 'Z' | timeago}})</span>
</div>
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
alt="avatar 1" style="width: 45px; height: 100%;">
</div>
</ng-container>
</div>
<form [formGroup]="messageForm" enctype="multipart/form-data" (ngSubmit)="createNewMessage()">
<div class="card-footer text-muted d-flex justify-content-start align-items-center p-3">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
alt="avatar 3" style="width: 40px; height: 100%;">
<input type="text" class="form-control form-control-lg" id="exampleFormControlInput1"
placeholder="Type message" formControlName="content" name="content">
<a class="ms-1 text-muted" href="#!"><i class="fas fa-paperclip"></i></a>
<a class="ms-3 text-muted" href="#!"><i class="fas fa-smile"></i></a>
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
This is the page from which I extracted the MDBootstrap template :
https://mdbootstrap.com/docs/standard/extended/chat
Thanks for your time