Skip to content

Instantly share code, notes, and snippets.

@crutchcorn
Created November 17, 2024 03:10
Show Gist options
  • Save crutchcorn/045f8ae91a029fc4d1bfcc0b48ea26f9 to your computer and use it in GitHub Desktop.
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
@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