I recently developed a chat application using Angular that utilizes the stomp socket from @stomp/ng2-stompjs. To display all messages, I am leveraging *ngFor.
<p *ngFor="let item of messages" style="padding: 5px; font-size: 18px">
<span style="color:darkturquoise">{{item.author}}</span>: {{item.message}}
</p>
However, I noticed that when the messages variable is updated (confirmed with console.log), Angular does not rerender *ngFor.
this.subscription = this.messagesObs.subscribe((message: Frame) => {
this.messages = <ResponseMessage[]>JSON.parse(message.body).slice();
console.log(this.messages);
});
I attempted to use
this.changeDetector.detectChanges();*ngFor after each subscription.
**Update:**
I have created a sample in Plunker. Note that the example will not function as my backend is hosted on localhost.