Created
November 17, 2024 03:10
-
-
Save crutchcorn/045f8ae91a029fc4d1bfcc0b48ea26f9 to your computer and use it in GitHub Desktop.
Demo of `this` being broken when moving from an arrow function to a method
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Component({ | |
selector: "window-size", | |
changeDetection: ChangeDetectionStrategy.OnPush, | |
template: ` | |
<div> | |
<p>Height: {{ height }}</p> | |
<p>Width: {{ width }}</p> | |
</div> | |
`, | |
}) | |
class WindowSizeComponent { | |
height = window.innerHeight; | |
width = window.innerWidth; | |
resizeHandler = () => { | |
this.height = window.innerHeight; | |
this.width = window.innerWidth; | |
}; | |
constructor() { | |
// This code will cause a memory leak, more on that soon | |
effect(() => { | |
window.addEventListener("resize", this.resizeHandler); | |
}) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment