Displaying updated information in Angular

Question

Displaying updated information in Angular

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

, but it did not resolve the issue. While I understand this is the default behavior of the framework, I am seeking an optimal way to trigger the rendering of *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.

angular typescript

Answer 1

Answer №1

To access your data, you can utilize the rxjs map operator along with the async-pipe provided by Angular for subscription. The pipe ensures that the subscription is properly handled even when the component is destroyed.

public messages$: Observable<ResponseMessage[]> = this.messagesObs.map((message: Frame) => {
  return JSON.parse(message.body) as ResponseMessage[];
});

Incorporate the following code in your component's view:

<p *ngFor="let item of messages$ | async" style="padding: 5px; font-size: 18px">
  <span style="color:darkturquoise">{{item.author}}</span>: {{item.message}}
</p>

Answer 2

To access your data, you can utilize the rxjs map operator along with the async-pipe provided by Angular for subscription. The pipe ensures that the subscription is properly handled even when the component is destroyed.

public messages$: Observable<ResponseMessage[]> = this.messagesObs.map((message: Frame) => {
  return JSON.parse(message.body) as ResponseMessage[];
});

Incorporate the following code in your component's view:

<p *ngFor="let item of messages$ | async" style="padding: 5px; font-size: 18px">
  <span style="color:darkturquoise">{{item.author}}</span>: {{item.message}}
</p>

Displaying updated information in Angular

Answer №1

Similar questions

Looping through arrays within objects using NgFor in Angular 2/JavaScript

Why is the ionChange/ngModelChange function being triggered from an ion-checkbox even though I did not specifically call it?

Utilize environment variables to access system information when constructing an Angular 2 application

Exploring JSON data in real-time

Prevent additional functions from running when clicking in Angular 5

The NestJS framework encountered an error due to a method being undefined in the

What is the best way to utilize a union of interfaces in TypeScript when working with instances?

Adding an event listener to the DOM through a service

Getting the button element in Angular when submitting a form

Aligning form elements horizontally with Angular 2 Material

Typescript throws an error when attempting to return an array of strings or undefined from a function

What is the best way to prevent jest.mock from being hoisted and only use it in a single jest unit test?

Create a custom definition for the useSelector function within a separate TypeScript file in a React

Why is it not possible to declare an interface or type within a TypeScript class?

Experience the latest happenings in SAP Spartacus 4.0 by signing up for updates directly from

Embracing Interfaces Over 'any' Types in TypeScript

What is the best way to divide a string into an array containing both linked and non-linked elements?

A guide on how to add the chosen item within the same tag using Angular 2

Verify if the array entries match

The multiline feature of tooltip on mat-table cell is malfunctioning