Javascript removeEventListener OnDestroy not working in Angular 6
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am trying to removeEventListener
in my angular compenent: Javascript removeEventListener not working
...
ngOnInit() {
document.addEventListener('visibilitychange', () =>this.handleVisibleState(), true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', () => this.handleVisibleState(), true);
}
handleVisibleState() {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
}
...
with the above addEventListener
works even after ngOnDestroy ()
How can I unbind visibilityState from document in angular components?
attempt 2
private visibilityChangeCallback: () => void;
ngOnInit() {
this.visibilityChangeCallback = () => this.handleVisibleState();
document.addEventListener('visibilitychange', this.handleVisibleState, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}
handleVisibleState() {
let vis = document.visibilityState === 'visible';
console.log(typeof this.configsService); // undefined
this.configsService.update_collab_visible(vis);
}
result:
ERROR TypeError: Cannot read property 'update_collab_visible' of undefined
angular typescript angular-routing
add a comment |
I am trying to removeEventListener
in my angular compenent: Javascript removeEventListener not working
...
ngOnInit() {
document.addEventListener('visibilitychange', () =>this.handleVisibleState(), true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', () => this.handleVisibleState(), true);
}
handleVisibleState() {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
}
...
with the above addEventListener
works even after ngOnDestroy ()
How can I unbind visibilityState from document in angular components?
attempt 2
private visibilityChangeCallback: () => void;
ngOnInit() {
this.visibilityChangeCallback = () => this.handleVisibleState();
document.addEventListener('visibilitychange', this.handleVisibleState, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}
handleVisibleState() {
let vis = document.visibilityState === 'visible';
console.log(typeof this.configsService); // undefined
this.configsService.update_collab_visible(vis);
}
result:
ERROR TypeError: Cannot read property 'update_collab_visible' of undefined
angular typescript angular-routing
add a comment |
I am trying to removeEventListener
in my angular compenent: Javascript removeEventListener not working
...
ngOnInit() {
document.addEventListener('visibilitychange', () =>this.handleVisibleState(), true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', () => this.handleVisibleState(), true);
}
handleVisibleState() {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
}
...
with the above addEventListener
works even after ngOnDestroy ()
How can I unbind visibilityState from document in angular components?
attempt 2
private visibilityChangeCallback: () => void;
ngOnInit() {
this.visibilityChangeCallback = () => this.handleVisibleState();
document.addEventListener('visibilitychange', this.handleVisibleState, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}
handleVisibleState() {
let vis = document.visibilityState === 'visible';
console.log(typeof this.configsService); // undefined
this.configsService.update_collab_visible(vis);
}
result:
ERROR TypeError: Cannot read property 'update_collab_visible' of undefined
angular typescript angular-routing
I am trying to removeEventListener
in my angular compenent: Javascript removeEventListener not working
...
ngOnInit() {
document.addEventListener('visibilitychange', () =>this.handleVisibleState(), true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', () => this.handleVisibleState(), true);
}
handleVisibleState() {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
}
...
with the above addEventListener
works even after ngOnDestroy ()
How can I unbind visibilityState from document in angular components?
attempt 2
private visibilityChangeCallback: () => void;
ngOnInit() {
this.visibilityChangeCallback = () => this.handleVisibleState();
document.addEventListener('visibilitychange', this.handleVisibleState, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}
handleVisibleState() {
let vis = document.visibilityState === 'visible';
console.log(typeof this.configsService); // undefined
this.configsService.update_collab_visible(vis);
}
result:
ERROR TypeError: Cannot read property 'update_collab_visible' of undefined
angular typescript angular-routing
angular typescript angular-routing
edited Nov 16 '18 at 19:00
Omar
asked Nov 16 '18 at 18:49
OmarOmar
9031226
9031226
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
Store the callback:
private visibilityChangeCallback: () => void;
ngOnInit() {
this.visibilityChangeCallback = () => this.handleVisibleState();
document.addEventListener('visibilitychange', this.visibilityChangeCallback, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.visibilityChangeCallback, true);
}
I guessself.handleVisibleState()
should bethis.handleVisibleState()
– Sunil Singh
Nov 16 '18 at 18:54
see my question. I added why that didnt work
– Omar
Nov 16 '18 at 19:00
In your edit, you're still doingdocument.addEventListener('visibilitychange', this.handleVisibleState, true);
.
– Frank Modica
Nov 16 '18 at 19:02
@Omar My answer essentially does what @PierreDuc's first suggestion does, but my answer creates a separate function so you don't have to change the class methodhandleVisibleState
to an arrow function. If you don't care about that, @PierreDuc's change is simpler.
– Frank Modica
Nov 16 '18 at 19:10
add a comment |
You have to make the function a property field on the class with an arrow function and not use an anonymous function, because the function reference won't be the same.
The reason you are getting the Cannot read property 'update_collab_visible' of undefined
error is because you are using a class function instead of a class field. This will move the this
context to the function, which is not what you want:
ngOnInit() {
document.addEventListener('visibilitychange', this.handleVisibleState, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}
handleVisibleState = () => {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
};
There are also other options. I see you want to use the capture flag for the event. You can think of using rxjs lib as well:
destroy = new Subject<void>();
ngOnInit() {
fromEvent(document, 'visibilitychange', true).pipe(
takeUntil(this.destroy)
).subscribe((event) => this.handleVisibleState(event));
}
ngOnDestroy() {
this.destroy.next();
this.destroy.complete();
}
advertisement
There is also an angular library which adds functionality to the template and component event binding called ng-event-options. If you have installed/imported that, you can simply use:
@HostListener('document:visibilitystate.c')
handleVisibleState() {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
}
and you're done
the last one will destroy automatically?
– Omar
Nov 16 '18 at 19:04
@Omar yes because it uses the library, and when the component gets destroyed every event with HostListener is removed. It's the same as using an event binding in your template. You also do not need to remove that manually
– PierreDuc
Nov 16 '18 at 19:05
I dont understand how the 3rd option's listener is registered?
– Omar
Nov 16 '18 at 19:13
@Omar read about @HostListener. It's an angular decorator to bind events on the component. But if you usedocument:
, orwindow:
orbody:
, it binds to that element. After that comes the event name. The ng-event-options adds the possibility for extra event options like capture (and a bunch more). This is set by single characters. In this case thec
stands forcapture
, which is what yourtrue
in your addEventListener does
– PierreDuc
Nov 16 '18 at 19:18
add a comment |
Calling removeEventListener() with arguments that do not identify any currently registered EventListener on the EventTarget has no effect. You're passing other function to that.
Using instance arrow function should help in your case:
ngOnInit() {
document.addEventListener('visibilitychange', this.handleVisibleState, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}
handleVisibleState = () => {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
}
add a comment |
This reason why this.<anything>
doesn't work is because the meaning of this
is different since it's within a callback and you're not binding it.
If you bind
this
it should work.
document.addEventListener('visibilitychange', this.handleVisibleState.bind(this), true);
1
The OP would still need to store the result ofthis.handleVisibleState.bind(this)
to pass it toremoveEventListener
.
– Frank Modica
Nov 16 '18 at 19:08
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53343747%2fjavascript-removeeventlistener-ondestroy-not-working-in-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
Store the callback:
private visibilityChangeCallback: () => void;
ngOnInit() {
this.visibilityChangeCallback = () => this.handleVisibleState();
document.addEventListener('visibilitychange', this.visibilityChangeCallback, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.visibilityChangeCallback, true);
}
I guessself.handleVisibleState()
should bethis.handleVisibleState()
– Sunil Singh
Nov 16 '18 at 18:54
see my question. I added why that didnt work
– Omar
Nov 16 '18 at 19:00
In your edit, you're still doingdocument.addEventListener('visibilitychange', this.handleVisibleState, true);
.
– Frank Modica
Nov 16 '18 at 19:02
@Omar My answer essentially does what @PierreDuc's first suggestion does, but my answer creates a separate function so you don't have to change the class methodhandleVisibleState
to an arrow function. If you don't care about that, @PierreDuc's change is simpler.
– Frank Modica
Nov 16 '18 at 19:10
add a comment |
Store the callback:
private visibilityChangeCallback: () => void;
ngOnInit() {
this.visibilityChangeCallback = () => this.handleVisibleState();
document.addEventListener('visibilitychange', this.visibilityChangeCallback, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.visibilityChangeCallback, true);
}
I guessself.handleVisibleState()
should bethis.handleVisibleState()
– Sunil Singh
Nov 16 '18 at 18:54
see my question. I added why that didnt work
– Omar
Nov 16 '18 at 19:00
In your edit, you're still doingdocument.addEventListener('visibilitychange', this.handleVisibleState, true);
.
– Frank Modica
Nov 16 '18 at 19:02
@Omar My answer essentially does what @PierreDuc's first suggestion does, but my answer creates a separate function so you don't have to change the class methodhandleVisibleState
to an arrow function. If you don't care about that, @PierreDuc's change is simpler.
– Frank Modica
Nov 16 '18 at 19:10
add a comment |
Store the callback:
private visibilityChangeCallback: () => void;
ngOnInit() {
this.visibilityChangeCallback = () => this.handleVisibleState();
document.addEventListener('visibilitychange', this.visibilityChangeCallback, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.visibilityChangeCallback, true);
}
Store the callback:
private visibilityChangeCallback: () => void;
ngOnInit() {
this.visibilityChangeCallback = () => this.handleVisibleState();
document.addEventListener('visibilitychange', this.visibilityChangeCallback, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.visibilityChangeCallback, true);
}
edited Nov 16 '18 at 18:55
answered Nov 16 '18 at 18:51
Frank ModicaFrank Modica
6,6642829
6,6642829
I guessself.handleVisibleState()
should bethis.handleVisibleState()
– Sunil Singh
Nov 16 '18 at 18:54
see my question. I added why that didnt work
– Omar
Nov 16 '18 at 19:00
In your edit, you're still doingdocument.addEventListener('visibilitychange', this.handleVisibleState, true);
.
– Frank Modica
Nov 16 '18 at 19:02
@Omar My answer essentially does what @PierreDuc's first suggestion does, but my answer creates a separate function so you don't have to change the class methodhandleVisibleState
to an arrow function. If you don't care about that, @PierreDuc's change is simpler.
– Frank Modica
Nov 16 '18 at 19:10
add a comment |
I guessself.handleVisibleState()
should bethis.handleVisibleState()
– Sunil Singh
Nov 16 '18 at 18:54
see my question. I added why that didnt work
– Omar
Nov 16 '18 at 19:00
In your edit, you're still doingdocument.addEventListener('visibilitychange', this.handleVisibleState, true);
.
– Frank Modica
Nov 16 '18 at 19:02
@Omar My answer essentially does what @PierreDuc's first suggestion does, but my answer creates a separate function so you don't have to change the class methodhandleVisibleState
to an arrow function. If you don't care about that, @PierreDuc's change is simpler.
– Frank Modica
Nov 16 '18 at 19:10
I guess
self.handleVisibleState()
should be this.handleVisibleState()
– Sunil Singh
Nov 16 '18 at 18:54
I guess
self.handleVisibleState()
should be this.handleVisibleState()
– Sunil Singh
Nov 16 '18 at 18:54
see my question. I added why that didnt work
– Omar
Nov 16 '18 at 19:00
see my question. I added why that didnt work
– Omar
Nov 16 '18 at 19:00
In your edit, you're still doing
document.addEventListener('visibilitychange', this.handleVisibleState, true);
.– Frank Modica
Nov 16 '18 at 19:02
In your edit, you're still doing
document.addEventListener('visibilitychange', this.handleVisibleState, true);
.– Frank Modica
Nov 16 '18 at 19:02
@Omar My answer essentially does what @PierreDuc's first suggestion does, but my answer creates a separate function so you don't have to change the class method
handleVisibleState
to an arrow function. If you don't care about that, @PierreDuc's change is simpler.– Frank Modica
Nov 16 '18 at 19:10
@Omar My answer essentially does what @PierreDuc's first suggestion does, but my answer creates a separate function so you don't have to change the class method
handleVisibleState
to an arrow function. If you don't care about that, @PierreDuc's change is simpler.– Frank Modica
Nov 16 '18 at 19:10
add a comment |
You have to make the function a property field on the class with an arrow function and not use an anonymous function, because the function reference won't be the same.
The reason you are getting the Cannot read property 'update_collab_visible' of undefined
error is because you are using a class function instead of a class field. This will move the this
context to the function, which is not what you want:
ngOnInit() {
document.addEventListener('visibilitychange', this.handleVisibleState, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}
handleVisibleState = () => {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
};
There are also other options. I see you want to use the capture flag for the event. You can think of using rxjs lib as well:
destroy = new Subject<void>();
ngOnInit() {
fromEvent(document, 'visibilitychange', true).pipe(
takeUntil(this.destroy)
).subscribe((event) => this.handleVisibleState(event));
}
ngOnDestroy() {
this.destroy.next();
this.destroy.complete();
}
advertisement
There is also an angular library which adds functionality to the template and component event binding called ng-event-options. If you have installed/imported that, you can simply use:
@HostListener('document:visibilitystate.c')
handleVisibleState() {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
}
and you're done
the last one will destroy automatically?
– Omar
Nov 16 '18 at 19:04
@Omar yes because it uses the library, and when the component gets destroyed every event with HostListener is removed. It's the same as using an event binding in your template. You also do not need to remove that manually
– PierreDuc
Nov 16 '18 at 19:05
I dont understand how the 3rd option's listener is registered?
– Omar
Nov 16 '18 at 19:13
@Omar read about @HostListener. It's an angular decorator to bind events on the component. But if you usedocument:
, orwindow:
orbody:
, it binds to that element. After that comes the event name. The ng-event-options adds the possibility for extra event options like capture (and a bunch more). This is set by single characters. In this case thec
stands forcapture
, which is what yourtrue
in your addEventListener does
– PierreDuc
Nov 16 '18 at 19:18
add a comment |
You have to make the function a property field on the class with an arrow function and not use an anonymous function, because the function reference won't be the same.
The reason you are getting the Cannot read property 'update_collab_visible' of undefined
error is because you are using a class function instead of a class field. This will move the this
context to the function, which is not what you want:
ngOnInit() {
document.addEventListener('visibilitychange', this.handleVisibleState, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}
handleVisibleState = () => {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
};
There are also other options. I see you want to use the capture flag for the event. You can think of using rxjs lib as well:
destroy = new Subject<void>();
ngOnInit() {
fromEvent(document, 'visibilitychange', true).pipe(
takeUntil(this.destroy)
).subscribe((event) => this.handleVisibleState(event));
}
ngOnDestroy() {
this.destroy.next();
this.destroy.complete();
}
advertisement
There is also an angular library which adds functionality to the template and component event binding called ng-event-options. If you have installed/imported that, you can simply use:
@HostListener('document:visibilitystate.c')
handleVisibleState() {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
}
and you're done
the last one will destroy automatically?
– Omar
Nov 16 '18 at 19:04
@Omar yes because it uses the library, and when the component gets destroyed every event with HostListener is removed. It's the same as using an event binding in your template. You also do not need to remove that manually
– PierreDuc
Nov 16 '18 at 19:05
I dont understand how the 3rd option's listener is registered?
– Omar
Nov 16 '18 at 19:13
@Omar read about @HostListener. It's an angular decorator to bind events on the component. But if you usedocument:
, orwindow:
orbody:
, it binds to that element. After that comes the event name. The ng-event-options adds the possibility for extra event options like capture (and a bunch more). This is set by single characters. In this case thec
stands forcapture
, which is what yourtrue
in your addEventListener does
– PierreDuc
Nov 16 '18 at 19:18
add a comment |
You have to make the function a property field on the class with an arrow function and not use an anonymous function, because the function reference won't be the same.
The reason you are getting the Cannot read property 'update_collab_visible' of undefined
error is because you are using a class function instead of a class field. This will move the this
context to the function, which is not what you want:
ngOnInit() {
document.addEventListener('visibilitychange', this.handleVisibleState, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}
handleVisibleState = () => {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
};
There are also other options. I see you want to use the capture flag for the event. You can think of using rxjs lib as well:
destroy = new Subject<void>();
ngOnInit() {
fromEvent(document, 'visibilitychange', true).pipe(
takeUntil(this.destroy)
).subscribe((event) => this.handleVisibleState(event));
}
ngOnDestroy() {
this.destroy.next();
this.destroy.complete();
}
advertisement
There is also an angular library which adds functionality to the template and component event binding called ng-event-options. If you have installed/imported that, you can simply use:
@HostListener('document:visibilitystate.c')
handleVisibleState() {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
}
and you're done
You have to make the function a property field on the class with an arrow function and not use an anonymous function, because the function reference won't be the same.
The reason you are getting the Cannot read property 'update_collab_visible' of undefined
error is because you are using a class function instead of a class field. This will move the this
context to the function, which is not what you want:
ngOnInit() {
document.addEventListener('visibilitychange', this.handleVisibleState, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}
handleVisibleState = () => {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
};
There are also other options. I see you want to use the capture flag for the event. You can think of using rxjs lib as well:
destroy = new Subject<void>();
ngOnInit() {
fromEvent(document, 'visibilitychange', true).pipe(
takeUntil(this.destroy)
).subscribe((event) => this.handleVisibleState(event));
}
ngOnDestroy() {
this.destroy.next();
this.destroy.complete();
}
advertisement
There is also an angular library which adds functionality to the template and component event binding called ng-event-options. If you have installed/imported that, you can simply use:
@HostListener('document:visibilitystate.c')
handleVisibleState() {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
}
and you're done
edited Nov 16 '18 at 19:07
answered Nov 16 '18 at 18:55
PierreDucPierreDuc
31.6k56280
31.6k56280
the last one will destroy automatically?
– Omar
Nov 16 '18 at 19:04
@Omar yes because it uses the library, and when the component gets destroyed every event with HostListener is removed. It's the same as using an event binding in your template. You also do not need to remove that manually
– PierreDuc
Nov 16 '18 at 19:05
I dont understand how the 3rd option's listener is registered?
– Omar
Nov 16 '18 at 19:13
@Omar read about @HostListener. It's an angular decorator to bind events on the component. But if you usedocument:
, orwindow:
orbody:
, it binds to that element. After that comes the event name. The ng-event-options adds the possibility for extra event options like capture (and a bunch more). This is set by single characters. In this case thec
stands forcapture
, which is what yourtrue
in your addEventListener does
– PierreDuc
Nov 16 '18 at 19:18
add a comment |
the last one will destroy automatically?
– Omar
Nov 16 '18 at 19:04
@Omar yes because it uses the library, and when the component gets destroyed every event with HostListener is removed. It's the same as using an event binding in your template. You also do not need to remove that manually
– PierreDuc
Nov 16 '18 at 19:05
I dont understand how the 3rd option's listener is registered?
– Omar
Nov 16 '18 at 19:13
@Omar read about @HostListener. It's an angular decorator to bind events on the component. But if you usedocument:
, orwindow:
orbody:
, it binds to that element. After that comes the event name. The ng-event-options adds the possibility for extra event options like capture (and a bunch more). This is set by single characters. In this case thec
stands forcapture
, which is what yourtrue
in your addEventListener does
– PierreDuc
Nov 16 '18 at 19:18
the last one will destroy automatically?
– Omar
Nov 16 '18 at 19:04
the last one will destroy automatically?
– Omar
Nov 16 '18 at 19:04
@Omar yes because it uses the library, and when the component gets destroyed every event with HostListener is removed. It's the same as using an event binding in your template. You also do not need to remove that manually
– PierreDuc
Nov 16 '18 at 19:05
@Omar yes because it uses the library, and when the component gets destroyed every event with HostListener is removed. It's the same as using an event binding in your template. You also do not need to remove that manually
– PierreDuc
Nov 16 '18 at 19:05
I dont understand how the 3rd option's listener is registered?
– Omar
Nov 16 '18 at 19:13
I dont understand how the 3rd option's listener is registered?
– Omar
Nov 16 '18 at 19:13
@Omar read about @HostListener. It's an angular decorator to bind events on the component. But if you use
document:
, or window:
or body:
, it binds to that element. After that comes the event name. The ng-event-options adds the possibility for extra event options like capture (and a bunch more). This is set by single characters. In this case the c
stands for capture
, which is what your true
in your addEventListener does– PierreDuc
Nov 16 '18 at 19:18
@Omar read about @HostListener. It's an angular decorator to bind events on the component. But if you use
document:
, or window:
or body:
, it binds to that element. After that comes the event name. The ng-event-options adds the possibility for extra event options like capture (and a bunch more). This is set by single characters. In this case the c
stands for capture
, which is what your true
in your addEventListener does– PierreDuc
Nov 16 '18 at 19:18
add a comment |
Calling removeEventListener() with arguments that do not identify any currently registered EventListener on the EventTarget has no effect. You're passing other function to that.
Using instance arrow function should help in your case:
ngOnInit() {
document.addEventListener('visibilitychange', this.handleVisibleState, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}
handleVisibleState = () => {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
}
add a comment |
Calling removeEventListener() with arguments that do not identify any currently registered EventListener on the EventTarget has no effect. You're passing other function to that.
Using instance arrow function should help in your case:
ngOnInit() {
document.addEventListener('visibilitychange', this.handleVisibleState, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}
handleVisibleState = () => {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
}
add a comment |
Calling removeEventListener() with arguments that do not identify any currently registered EventListener on the EventTarget has no effect. You're passing other function to that.
Using instance arrow function should help in your case:
ngOnInit() {
document.addEventListener('visibilitychange', this.handleVisibleState, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}
handleVisibleState = () => {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
}
Calling removeEventListener() with arguments that do not identify any currently registered EventListener on the EventTarget has no effect. You're passing other function to that.
Using instance arrow function should help in your case:
ngOnInit() {
document.addEventListener('visibilitychange', this.handleVisibleState, true);
}
ngOnDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}
handleVisibleState = () => {
let vis = document.visibilityState === 'visible';
this.configsService.update_collab_visible(vis);
}
answered Nov 16 '18 at 19:25
yurzuiyurzui
105k12213230
105k12213230
add a comment |
add a comment |
This reason why this.<anything>
doesn't work is because the meaning of this
is different since it's within a callback and you're not binding it.
If you bind
this
it should work.
document.addEventListener('visibilitychange', this.handleVisibleState.bind(this), true);
1
The OP would still need to store the result ofthis.handleVisibleState.bind(this)
to pass it toremoveEventListener
.
– Frank Modica
Nov 16 '18 at 19:08
add a comment |
This reason why this.<anything>
doesn't work is because the meaning of this
is different since it's within a callback and you're not binding it.
If you bind
this
it should work.
document.addEventListener('visibilitychange', this.handleVisibleState.bind(this), true);
1
The OP would still need to store the result ofthis.handleVisibleState.bind(this)
to pass it toremoveEventListener
.
– Frank Modica
Nov 16 '18 at 19:08
add a comment |
This reason why this.<anything>
doesn't work is because the meaning of this
is different since it's within a callback and you're not binding it.
If you bind
this
it should work.
document.addEventListener('visibilitychange', this.handleVisibleState.bind(this), true);
This reason why this.<anything>
doesn't work is because the meaning of this
is different since it's within a callback and you're not binding it.
If you bind
this
it should work.
document.addEventListener('visibilitychange', this.handleVisibleState.bind(this), true);
answered Nov 16 '18 at 19:07
mwilsonmwilson
3,31932149
3,31932149
1
The OP would still need to store the result ofthis.handleVisibleState.bind(this)
to pass it toremoveEventListener
.
– Frank Modica
Nov 16 '18 at 19:08
add a comment |
1
The OP would still need to store the result ofthis.handleVisibleState.bind(this)
to pass it toremoveEventListener
.
– Frank Modica
Nov 16 '18 at 19:08
1
1
The OP would still need to store the result of
this.handleVisibleState.bind(this)
to pass it to removeEventListener
.– Frank Modica
Nov 16 '18 at 19:08
The OP would still need to store the result of
this.handleVisibleState.bind(this)
to pass it to removeEventListener
.– Frank Modica
Nov 16 '18 at 19:08
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53343747%2fjavascript-removeeventlistener-ondestroy-not-working-in-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown