Angular 6 - Detect when variable change in another part of the app

Question

I'm using Ngx-webstorage (https://www.npmjs.com/package/ngx-webstorage) annotation to bind properties from local & session storage to typescript variables.

In my app component, the background is defined by one of those properties, called JuegoDatos (Set of data). Each JuegoDatos has a file id, that defines the background image of it.

What i want is, when the JuegoDatos change (sessionStorage property, binded to typescript variable) detect it so i can get the new id of the file and update the background.

I made it work by using an interval.

@SessionStorage(GlobalVariable.JUEGO_DATOS_KEY) private juegoDatosActual: JuegoDatos;

    private idImagen: number;
    private urlImagenJuegoDatos: SafeResourceUrl;

// Some code

ngOnInit() {
        setInterval(() => {
            if (this.juegoDatosActual == null || this.juegoDatosActual.imagenFondo == null) {
                return;
            }
            if (this.idImagen === this.juegoDatosActual.imagenFondo.id) {
                return;
            }

            this.idImagen = this.juegoDatosActual.imagenFondo.id;
            this.reloadImagen();
        }, 1000);
    }

But it seems a little hacky and very ugly. Also the background flashes.

Answer 1

You need to use BehaviorSubject to detect change.

Create a service like:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class JuegoDatosChangeService {

constructor() { }

public status: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  changeData(value: any) {
    this.status.next(value);
  }
}

On change of "JuegoDatos", call the service,

this.juegoDatosChangeService.changeData(data);

and to detect the change:

this.juegoDatosChangeService.status.subscribe((val) => {
    console.log(val)
});