let signalRServerEndPoint = 'https://localhost:44338';
this.connection = $.hubConnection(signalRServerEndPoint);
this.proxy = this.connection.createHubProxy('MessagesHub');
this.proxy.on("ReceiveMessage", (message) => {
console.log(message); //LOG IS OKAY
this.listMessages.push(message); // PUSH IS OKAY
console.log(this.listMessages); // LOG IS OKAY IS OKAY
});
The listmessages is an array of string[]. Both console.log() works fine, also the this.listMessages.push(message) works fine because the second console.log display the right array of string. But my problem is in my UI it doesn't automatically populate the new listMessages. It will only display the new populated array when I type something in the textbox or when I click a send button again then it display the latest I've sent earlier. Anyone can help me what's wrong with this?
<div *ngFor="let listMessage of listMessages;let indexs = index;">
<div class="row align-items-center" style="margin-bottom: 5px;" *ngIf="indexs % 2 == 0">
<div class="col-lg-7">
<div class="row">
<img [src]="createImagePath('userphoto/202431775reyes.jpg')" class="avatar avatar-sm rounded-circle" style="margin-left: 20px; max-width: 70px; max-height: 50px;" />
<div class="card-header bg-gradient-success" style="margin-left: 20px; border-radius: 25px; background-color: #f1f0f0;">
<h4 style="margin-bottom: -10px; margin-top: -10px;" class="text-white">{{listMessage}}</h4>
</div>
</div>
<h6 class="text-primary" style="margin-left: 10px;">Anthony Earl Cuartero: 12:00 PM | Aug 13</h6>
</div>
</div>
</div>