I want to display the list of available rooms in a
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
rooms : any;
constructor(private webSocketService: WebSocketService, private formBuilder: FormBuilder, private router: Router)
{ }
ngOnInit(): void {
this.rooms = this.webSocketService.getRooms().subscribe(res => {
console.log(res.body)
});
}
webSocketService :
public getRooms() : Observable<any> {
return this.http.get(`${this.url}/rooms`,{observe: 'response'});
home.html :
<ul>
<li *ngFor="let room of rooms">{{rooms}}</li>
</ul>
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
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>