How do i refresh the data i retrieve from a service?

Question

I want to display the list of available rooms in a

list in my home component.

for that I declared rooms variable that i assigned to a subscription to the websocketService. However whenever i created a new room, it's not added to the list automatically unless i refresh the page. how do i fix that?

home.component.ts

public getRooms() :  Observable<any> {
      return this.http.get(`${this.url}/rooms`,{observe: 'response'});

webSocketService:

<ul>
  <li *ngFor="let room of rooms">{{rooms}}</li> 
</ul>

home.html:

 <ul> <li *ngFor="let room of rooms">{{rooms}}</li> </ul>

Answer 1

 ngOnInit(): void { 
       this.webSocketService.getRooms().subscribe(res => {
          this.rooms = res
         });
       }

You need to make the assignment in the class variable inside the subscription where it becomes available

Answer 2

Try by converting you variable rooms as observable and just get the reference from the service. In the template You will get a subscription by using Async Pipe.

ngOnInit(): void { 
  this.rooms$ = this.webSocketService.getRooms();
}

<ul>
  <li *ngFor="let room of rooms$ | async">{{room.someProperty}}</li> 
</ul>