23

So I need in Angular 2 or 4 to manage when the browser tab of my app is focused or not. Is there any way to use the window.onfocus and window.onblur ?

Thanks a lot

3 Answers 3

44

You can use a component with @HostListener.

Something like:

@Component({})
export class WindowComponent {

constructor(){}

    @HostListener('window:focus', ['$event'])
    onFocus(event: any): void {
        // Do something
    }

    @HostListener('window:blur', ['$event'])
    onBlur(event: any): void {
        // Do something
    }

}

Just check that you don't have multiple WindowComponent running at the same time, because you will have an unexpected behavior, due that each instance will react to these events.

2
  • Thanks for taking your time my friend. I have a question... How i use this inside a component? I need to use a subscription? Commented Aug 2, 2017 at 19:11
  • You are welcome, you don't need to use a subscription, angular will remove the listener when the component get destroyed and the onFocus function will be triggered when the browser trigger the window.onfocus, same for blur.
    – dlcardozo
    Commented Aug 2, 2017 at 19:19
6

Turns out this doesn't work in services, which was my requirement. My solution was doing it "the old way":

@Injectable()
export class WindowService {
    constructor(){
        window.addEventListener('focus', event => {
            console.log(event);
        });
        window.addEventListener('blur', event => {
            console.log(event);
        });
    }
}

Not sure I did it the "correct" way, but it works on Chrome. What I'm not sure about is if I should destroy the event listener or not, and if it works in other browsers. Let me know if I'm inadvertently shooting myself in the foot here. Will update answer if so, or delete it if need be.

1

In a more reactive approach, I use this injection token:

export const WINDOW_FOCUS = new InjectionToken<Observable<boolean>>(
    'Shared Observable based on `window focus/blurred events`',
    {
        factory: () => {    
            return merge(fromEvent(window, 'focus'), fromEvent(window, 'blur')).pipe(
                startWith(null),
                map(() => window.document.hasFocus()),
                distinctUntilChanged(),
                share(),
            );
        },
    },
);

Ideally, you do not want to rely on the global windows variable, you could replace it with injecting the WINDOW and DOCUMENT tokens from https://github.com/ng-web-apis/common.

To use the WINDOW_FOCUS injection token, in any component or service, it can be added to the constructor like this:

@Injectable()
export class SomeService {
    constructor(
        @Inject(WINDOW_FOCUS) private readonly windowFocus$: Observable<boolean>
    ) {} 
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.