user image

Published in : 2022-03-02

How to call event handler onload for Angular application?


I want to open a window containing user authorization form details. I want to do this by checking window location, to do so the event handler not call on every event.  I am not able to overwrite event handlers.

Why the event is not triggering? what could be the alternative way to intercept the Authorization form result?

My code:

import { Inject, Injectable } from '@angular/core';

// ... other imports will be go here. //

  providedIn: 'root'
export class UserWindowService {

  constructor(@Inject(WINDOW) public window: Window) {} // here WINDOW is imported from InjectionToken<Window>

  openUserWindow(): void {
    let windowObj ='http://localhost:4200/verify', '_blank');
    let evntHandler= function() {
    //Below order of events should execute one by one, one after one.
    windowObj!.onload = evntHandler;
    windowObj!.addEventListener('load', evntHandler);
    windowObj!.addEventListener('onload', evntHandler);
    windowObj!.document.onload = evntHandler;
    windowObj!.onhashchange = evntHandler;
    windowObj!.addEventListener('hashchange', evntHandler, false);


Rakshit Date : 2022-03-05

Best answers


Best answers


When you call “”, it seems like, your window may be blocked by a popup blocker. Chrome Firefox and other giants in browsers - all are using one common thing, like popup blocker to prevent loading of hundreds of tabs using javascript - malscript functionality.


You should check if the “window” variable exists or not.

//PUT Your code here ...

when you use exclamation mark, “windowObj!.onload”, you are forcing to open a window.

In such case, window!.addEventListener() might not work (exclamation will fail) if window does not exist.

Remember: You can't use load listener to your window instance when you use,

Shilpa Date : 2022-03-06

Best answers


Best answers


Yes popup blocker is issue, if I am allowing popup from the top of chrome browser, it works fine! Thanks for sharing knowledge.

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

How to translate Angular application easily?
Publish date: 2022-03-03 | Comments: 2

Tag: Angular

How to bind Weekends off to my kendo calendar in Angular?
Publish date: 2022-03-11 | Comments: 2

Tag: Angular

How to reload Angular component without refreshing page?
Publish date: 2022-03-02 | Comments: 1

Tag: Angular

Angular - PrimeNG charts adding colors for each legends dynamically
Publish date: 2022-02-27 | Comments: 1

Tag: Angular

Static code analysis tools integration with latest Angular version
Publish date: 2022-02-25 | Comments: 1

Tag: Angular

How to calculate distance between two Bluetooth devices?
Publish date: 2022-02-26 | Comments: 1

Tag: Angular