How can I get an automatic refresh when I click a button on Angular?

Question

I'm building a chat application. All works fine; however, when I click send, the message isn't displayed until I manually reload the page.

I think I'm missing something after the subscribe.

    onSubmit() {
    this.chatService
      .sendMessage(
        'https://db_url/message.json',
        {
          message: this.chatForm.value.message,
          username: this.authService.user.displayName,
        }
      )
      .subscribe((data) => {
        // ...
        
        console.log(data);
      });

    this.chatForm.reset();
  }

Could someone point out what I might be missing or doing wrong in my code? Thank you.

Answer 1

You can try storing the subscribed data in a messages array like messages: Array<Message> = []; and then subscribe to it on the onInit() method, and display the messages maybe with <div *ngFor="let message of messages | slice: ind:messages.length"> (or just display it on the console, whatever you want). It may also be because of subscribing to the sendMessages function instead of the getMessages? (without reading the rest of the code, I can't tell exactly)