How to use MDBootstrap Chat dynamically?

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