Azure Communication Service Chat Integration with Angular 13

<label for="">Add Thread</label>
<br>
<br>
<input type="text" placeholder="Group Name" [(ngModel)]="Name" name="group Name">
<input type="text" placeholder="Your Display Name" [(ngModel)]="display_name" name="display name">
<button (click)="createChatThread()">Submit</button>
<br>
<br>
<a *ngIf="threadLink" href="{{threadLink}}">{{threadLink}}</a>
<br>
<br>
<br>
<br>
<br>
<div *ngIf="threadLink">
  <label for="">Add user to thread</label>
  <br>
  <br>
  <input type="text" placeholder="User id" [(ngModel)]="other_user_CommunicationId" name="otherCommunicationUserId">
  <input type="text" placeholder="Display Name" [(ngModel)]="other_display_name" name="otherDisplayName">
  <button (click)="AddUserParticipantToTheChatThread()">Submit</button>
</div> 

chat-thread.component.ts

import {
    Component,
    OnInit,
    ChangeDetectorRef
} from '@angular/core';
import {
    ChatClient,
    ChatThreadClient
} from '@azure/communication-chat';
import {
    HttpClient
} from '@angular/common/http';
import {
    AzureCommunicationTokenCredential
} from '@azure/communication-common';
import {
    ActivatedRoute
} from '@angular/router';
import {
    CommunicationIdentityClient
} from '@azure/communication-identity';
@Component({
    selector: 'app-chat-thread',
    templateUrl: './chat-thread.component.html',
})
export class ChatThreadComponent implements OnInit {
    endpointUrl = 'https://xxxxx.communication.azure.com';
    communicationUserId: any;
    userAccessToken: string = '';
    chatClient: ChatClient | any = null;
    topicName: string = '';
    displayName: string = '';
    currentThreadId: any;
    chatThreadClient: ChatThreadClient | any = null;
    messages: message[] = [];
    sendMsg: message = {
        message: '',
        sender: ''
    };
    constructor(public http: HttpClient, private changeDetection: ChangeDetectorRef, private route: ActivatedRoute) {}
    async ngOnInit(): Promise < void > {
        const ConnectionString = 'xxxxxxxx';
        const client = new CommunicationIdentityClient(ConnectionString);
        this.currentThreadId = this.route.snapshot.paramMap.get('threadid');
        this.communicationUserId = this.route.snapshot.paramMap.get('userid');
        let data = await client.getToken(this.communicationUserId, ["chat"]);
        this.userAccessToken = data.token;
        this.chatClient = new ChatClient(this.endpointUrl, new AzureCommunicationTokenCredential(this.userAccessToken));
        this.chatThreadClient = this.chatClient.getChatThreadClient(this.currentThreadId);
        this.setupHandlers();
    }
    async setupHandlers() {
        this.getListMessages();
        await this.chatClient.startRealtimeNotifications();
        this.chatClient.on("chatMessageReceived", ((state: any) => {
            this.getListMessages();
        }).bind(this));
        this.chatClient.on("chatMessageEdited", ((state: any) => {
            this.getListMessages();
        }).bind(this));
        this.chatClient.on("chatMessageDeleted", ((state: any) => {
            this.getListMessages();
        }).bind(this));
        this.chatClient.on("typingIndicatorReceived", ((state: any) => {
            this.getListMessages();
        }).bind(this));
        this.chatClient.on("readReceiptReceived", ((state: any) => {
            this.getListMessages();
        }).bind(this));
        this.chatClient.on("chatThreadCreated", ((state: any) => {
            this.getListMessages();
        }).bind(this));
        this.chatClient.on("chatThreadDeleted", ((state: any) => {
            this.getListMessages();
        }).bind(this));
        this.chatClient.on("chatThreadPropertiesUpdated", ((state: any) => {
            this.getListMessages();
        }).bind(this));
        this.chatClient.on("participantsAdded", ((state: any) => {
            this.getListMessages();
        }).bind(this));
        this.chatClient.on("participantsRemoved", ((state: any) => {
            this.getListMessages();
        }).bind(this));
    }
    async getListMessages() {
        this.messages = [];
        const messages = this.chatThreadClient.listMessages();
        for await (const message of messages) {
            if (message.type == "text") {
                let msg: message = {
                    sender: message.senderDisplayName,
                    message: message.content.message
                };
                this.messages.push(msg);
            }
        }
        this.changeDetection.detectChanges();
    }
    async sendMessage() {
        let sendMessageRequest = {
            content: this.sendMsg.message
        };
        let sendMessageOptions = {
            senderDisplayName: this.sendMsg.sender,
            type: 'text'
        };
        const sendChatMessageResult = await this.chatThreadClient.sendMessage(sendMessageRequest, sendMessageOptions);
        const messageId = sendChatMessageResult.id;
        this.sendMsg = {
            message: '',
            sender: ''
        };
    }
    async ListUsersInChatThread() {
        const participants = this.chatThreadClient.listParticipants();
        for await (const participant of participants) {
            console.log(participant);
        }
    }
    async RemoveUserFromChatThread(userId: any) {
        await this.chatThreadClient.removeParticipant({
            communicationUserId: userId
        });
        await this.ListUsersInChatThread();
    }
}
interface message {
    sender: string,
        message: string
}

chat-thread.component.html

<div *ngFor="let message of messages;" class="row">
  <label for="">{{message.sender}}</label> :       <label for="">{{message.message}}</label>
</div>
<br>
<br>
<br>
<br>
<div class="col-md-12">
  <label for="">Send New Message</label>
  <br>
  <br>
  <input type="text" placeholder="Sender" [(ngModel)]="sendMsg.sender" name="sender">
  <input type="text" placeholder="Message" [(ngModel)]="sendMsg.message" name="message">
  <button (click)="sendMessage()">Submit</button>
</div> 

app-routing.module.ts