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

Ionic Framework Ionic Angular
1

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

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

export class Message {
    constructor(
        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>
    </ion-item-sliding>
</ion-virtual-scroll>

Conversation-detail.page.ts:

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

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

Conversations.service.ts:

getConversation(id: string) {
    return this.conversations.pipe(
      take(1),
      map(conversations => {
        return { ...conversations.find(conversation => conversation.id === 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>
</form>

Conversation-detail.page.ts:

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

And here is the rest of the ConversationsService code:

addMessageToConversation(conversationId: string, message: string) {
    this.getConversationToAddMessage(conversationId).messages.push(this.createMessage(message));
    console.log(this._conversations);
  }

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

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

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