How to track changes on the window object using angular?

Question

I need to build pages for VR systems. This works in a very weird way: A browser running inside the VR environment injects a object named zData.

So, if I type window on the console, this will list all the things related to window such as navigator, focus, screen - And an additional object: zData

I need to observe the window.zData and track the changes.

So, since I can't reproduce this here, let's pretend that zData does not exists. Let's say that I need to track the innerWidth value of window. So every time I reduce my window or reduce my view port, this must trigger.

I need something like :

 window.innerWidth.subscribe((oldValue,newValue) => {
  console.log('old', oldValue);
  console.log('new', newValue);
 });

If I got a solution to track the innerWidth, I believe I can use the same to track my zData. How to archive it ?

Thanks !

Simon K · Accepted Answer · 2018-07-31 00:30:21Z

It is currently not possible to track the change of object variables in Angular that are outside the scope of your components/services/directives including global and window variables.

The closest solution you could have would be to implement your own watch on the variable using an interval timer and tracking the last checked value and comparing it to the current value. You could even implement it in a service if you needed to use it in multiple places.

import { OnInit, OnDestroy } from '@angular/core';
import { Subject, Observable } from 'rxjs';

export interface CheckResult {
    oldValue: object;
    newValue: object;
}

export class ZDataCheckerService implements OnInit, OnDestroy {
    private checker: Subject<CheckResult>;
    public checker$: Observable<CheckResult>;
    private previousValue: object;
    private interval: number;
    private readonly TIMER = 500;


    constructor() {
        this.checker = new Subject<CheckResult>();
        this.checker$ = this.checker.asObservable();
    }

    ngOnInit(): void {
        this.interval = window.setInterval(() => {
            if (this.isDifferent()) {
                this.checker.next({ oldValue: this.previousValue, newValue: window.zData });
            }
            this.previousValue = { ...window.zData };
        }, this.TIMER);
    }

    ngOnDestroy(): void {
        if (typeof this.interval !== 'undefined') {
            window.clearInterval(this.interval);
        }
    }

    private isDifferent(): boolean {
        // Check previous value vs current value using preferred method
        return JSON.stringify(window.zData) !== JSON.stringify(this.previousValue);
    }
}

You would have to set the timer to be as frequent as you want to check it and you can subscribe to it with the following:

this.zDataCheckerService.checker$.subscribe({ oldValue, newValue } => {
    // Do whatever
});

Collectives™ on Stack Overflow

How to track changes on the window object using angular?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related