Angular6 - Variable won't update - rxjs

Question

I'm sorry I'm sure this is one of the most frequently asked questions about angular, and I found a ton but nothing's helping me here. I got a simple Observable - subscribe relationship with a variable.
my Service:
activeRoom: number = 0; // we're starting in room 0
/* get the roomnumber from open-rooms to chat-window */
getActiveRoom(): Observable<number> {
return of(this.activeRoom);
}
my component:
constructor(
private activeRoomService: ActiveRoomService){}
ngOnInit() {
/* Observe if we're changing rooms */
this.activeRoomService.getActiveRoom().subscribe(newActiveRoom => {
this.activeRoomChat = []; // clear the message board
this.activeRoom = newActiveRoom;
});
}
click(){
console.log("the following line doesn't work");
console.log(this.activeRoom);
console.log("the following line does work")
console.log(this.activeRoomService.activeRoom);
}
I obviously can't update my component with a click every time, so option b is no option :D
What's the blatantly obvious thing I'm missing here?
Here's a working example.
Service:
private userArray: User[] = [];
getUserArray(): Observable<User[]>{
return of(this.userArray);
}
component:
constructor(private backend: BackendService) {}
ngOnInit() {
this.backend.getUserArray().subscribe(user => {
this.userlist = user;
// console.log(user);
});
Can someone please point a really really big red arrow to the thing I'm missing here?

Answer 1

Changed
activeRoom: number = 0;
getActiveRoom(): Observable<number> {
return of(this.activeRoom);
}
setActiveRoom(roomID): void {
this.activeRoom = roomID;
}
to:
activeRoom: Subject<number> = new Subject;
public getActiveRoom(): Observable<number> {
return this.activeRoom.asObservable();
}
public setActiveRoom(roomID): void {
this.activeRoom.next(roomID);
}
and it works. To be honest, I have no idea why or what changed, but I'm happy it works :D