How to update list in Ionic 5 / Angular app using Subscribers & Observables?

In my Ionic 5 / Angular app, I have the below Conversation & Message models:

export class Conversation {
        public id: string,
        public userId: string,
        public mechanicId: string,
        public messages: Message[]
    ) { }

export class Message {
        public id: string,
        public text: string,
        public userId: string,
        public timestamp: Date
    ) { }

On Conversation-Detail page, I am displaying a list of Messages related to a particular Conversation.

On Conversation-Detail, there is also a form that allows users to add more Messages to this Conversation.

Here is the current behaviour:

  1. Open Conversation-Detail page, & list of Messages is displayed
  2. Enter text into the form, & click Send. No update is made to list of Messages.
  3. Leave Conversation-Detail page, navigate back to Conversation-Detail, & list of Messages contains the new message.

But I want the list of Messages to be updated after the user clicks Send, how do I do this?
(I.e. Display the latest messages)

I think it is important to note that the console.log('Loaded', this.loadedMessages); is only displaying when I navigate to the page, it isn’t logging when I Send a new Message

On Conversation-Detail, I am using the ID of a Conversation to display all Messages within that Conversation:

<ion-virtual-scroll [items]="loadedMessages">
    <ion-item-sliding *virtualItem="let message">
        <h2>{{ message.text}}</h2>

conversation: Conversation;
loadedMessages: Message[];
private conversationsSub: Subscription;

ngOnInit() {
      this.conversationsSub = this.conversationsService
        .subscribe(conversation => {
          this.conversation = conversation;
          this.loadedMessages = this.conversation.messages;
          console.log('Loaded', this.loadedMessages);
          this.form = new FormGroup({
            message: new FormControl(null, {


getConversation(id: string) {
    return this.conversations.pipe(
      map(conversations => {
        return { ...conversations.find(conversation => === id) };

On Conversation-Detail, I also have a form allowing users to add more Messages to this Conversation:

<form [formGroup]="form">
    <ion-textarea formControlName="message"></ion-textarea>
    <ion-button (click)="onSendMessage()">Send</ion-button>

onSendMessage() {
    this.conversationsService.addMessageToConversation(, this.form.value.message);

And here is the rest of the ConversationsService code:

addMessageToConversation(conversationId: string, message: string) {

  getConversationToAddMessage(id: string) {
    return this._conversations.getValue().find(conversation => === id);

private createMessage(message: string): Message {
    return {
      id: Math.random().toString(),
      text: message,
      userId: this.authService.userId,
      timestamp: new Date(

So the Message list is only updating when I leave the page & go back. How can I update the list without having to leave?