#window in a component

8 messages · Page 1 of 1 (latest)

mossy cosmos
#

So I'm using window to watch for keypresses so I can change the direction a dot is going on a canvas

  ngOnInit() {
    this.ctx = this.canvas.nativeElement.getContext('2d');
    this.ctx.fillStyle = 'red';
    this.square = new Square(this.ctx)
    this.square.draw()

    window.addEventListener('keydown', function (event) {
      this.directionChange(event);
   });
  }

How would I go to pass that event into directionChange() which is located inside of the components ts

This is all my html

<canvas #canvas width="600" height="300"></canvas>
<button (click)="play()">Play</button>
eager ingot
#

Angular has @HostListener for that

# 
@HostListener('window:keydown', [ '$event' ]) public directionChange(evnt: KeyboardEvent): void {
#

How would I go to pass that event into directionChange() which is located inside of the components ts
exactly as you showed? Not sure what you are asking

mossy cosmos
#

Before I just learned about HostListener the window.eventListener isn't considered the same class so I had to find a way to pass it into the class I want.

But I'm attempting to do this HostListener so that part might be redundent

#

Yep that did what I needed

eager ingot
#

No idea what you are taking about. Sorry!