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

@Sweg wrote:

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, 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:

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, {
            })
          });
        });
    });
  }

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 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())
    };
  }

If I enter text into the form, click Send navigate away from the Conversation-Detail page, & navigate back, the new message is displayed in the <ion-virtual-scroll>.

However, the <ion-virtual-scroll> isn’t updated if I don’t leave the page.

Can someone please show me how I can update this list without having to leave the page?

I think I may have to use Subscribers & Observables, but I’m not sure how. Thanks a lot in advance, & I can show more code if it will help solve the issue.

Posts: 1

Participants: 1

Read full topic