title: Angular 6 - Detect when variable change in another part of the app
body: <p>I'm using <code>Ngx-webstorage</code> (<a href="https://www.npmjs.com/package/ngx-webstorage" rel="nofollow noreferrer">https://www.npmjs.com/package/ngx-webstorage</a>) annotation to bind properties from local &amp; session storage to typescript variables.</p>
  
  <p>In my app component, the background is defined by one of those properties, called <code>JuegoDatos</code> (Set of data). Each JuegoDatos has a file id, that defines the background image of it.</p>
  
  <p>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.</p>
  
  <p>I made it work by using an interval.</p>
  
  <pre class="lang-js prettyprint-override"><code>
  @SessionStorage(GlobalVariable.JUEGO_DATOS_KEY) private juegoDatosActual: JuegoDatos;
  
      private idImagen: number;
      private urlImagenJuegoDatos: SafeResourceUrl;
  
  // Some code
  
  ngOnInit() {
          setInterval(() =&gt; {
              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);
      }
  
  </code></pre>
  
  <p>But it seems a little hacky and very ugly. Also the background flashes.</p>