The concept of 'this' in TypeScript classes compared to JavaScript's scope

Question

The concept of 'this' in TypeScript classes compared to JavaScript's scope

Is there a way to change the custom icon of a video when it is toggled between Play and Pause?

ngAfterViewInit() {
 const vdoCont = document.querySelector('.video-player');
 const vdo = vdoCont.querySelector('video');
    vdo.addEventListener('play', () => {
     console.log(this) // This "this" refers to the TypeScript class
     this.updateVdoIcon(this);
    });
    vdo.addEventListener('pause', () => {
     console.log(this) // Here "this" refers to typescript class
     this.updateVdoIcon(this);
    });
}

updateVdoIcon(videoElment: any) {
    console.log(videoElment); // I'm expecting this to be the video element instead of the TypeScript class
  }

I attempted to change arrow functions to JavaScript functions, but then I can't utilize my "updateVdoIcon" function.

vdo.addEventListener('play', function() {
      this.updateVdoIcon(this); // Property 'updateVdoIcon' does not exist on type 'HTMLVideoElement'
});

While I know I could use an anonymous function (as shown below) and update the icon there, what if I have a lot of code that I want to separate into a function?

vdo.addEventListener('play', function() {
 this.paused ? console.log('Play icon') : console.log('Pause icon')
});

javascript angular typescript this

Answer 1

Answer №1

When the event listener handler is triggered, it operates outside the Component's scope. This means that this does not refer to the component, but rather the control element.

To resolve this issue, you should bind your listener with this.

vdo.addEventListener('play', (function() {
      this.updateVdoIcon(this);
}).bind(this));

For more information, you can refer to the documentation here.

You can enhance clarity by breaking it down into a separate function call onClick.

onClick() {
  this.updateVdoIcon(this);
}

initialize() {
  vdo.addEventListener('play', this.onClick.bind(this));
}

Alternatively, you can store this as the component and pass it to the event listener.

let self = this;

vdo.addEventListener('play', function() {
      self.updateVdoIcon(this);
});

Answer 2

When the event listener handler is triggered, it operates outside the Component's scope. This means that this does not refer to the component, but rather the control element.

To resolve this issue, you should bind your listener with this.

vdo.addEventListener('play', (function() {
      this.updateVdoIcon(this);
}).bind(this));

For more information, you can refer to the documentation here.

You can enhance clarity by breaking it down into a separate function call onClick.

onClick() {
  this.updateVdoIcon(this);
}

initialize() {
  vdo.addEventListener('play', this.onClick.bind(this));
}

Alternatively, you can store this as the component and pass it to the event listener.

let self = this;

vdo.addEventListener('play', function() {
      self.updateVdoIcon(this);
});

Answer 3

Answer №2

If you want to try a different approach, you can utilize the ElementRef to gain access to the element and then establish an event binding.

The code snippet can be found here: .

import { AfterViewInit, Component, ElementRef} from '@angular/core';

constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
  this.elementRef.nativeElement.querySelector('my-element')
                                .addEventListener('click', this.onClick.bind(this));
}

onClick(event) {
  console.log(event);
}

Answer 4

If you want to try a different approach, you can utilize the ElementRef to gain access to the element and then establish an event binding.

The code snippet can be found here: .

import { AfterViewInit, Component, ElementRef} from '@angular/core';

constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
  this.elementRef.nativeElement.querySelector('my-element')
                                .addEventListener('click', this.onClick.bind(this));
}

onClick(event) {
  console.log(event);
}

Answer 5

Answer №3

If you pass the event.currentTarget into the callback function, it will refer to the element where the event listener was defined:

vdo.addEventListener('play', (event) => {
     this.updateVdoIcon(event.currentTarget);
});

In this example, the reference to this is the lexical this within the arrow function. It captures the context of this from the lexical scope, specifically the class instance.

Answer 6

If you pass the event.currentTarget into the callback function, it will refer to the element where the event listener was defined:

vdo.addEventListener('play', (event) => {
     this.updateVdoIcon(event.currentTarget);
});

In this example, the reference to this is the lexical this within the arrow function. It captures the context of this from the lexical scope, specifically the class instance.

Answer 7

Answer №4

Below is the solution provided for you:

ngAfterViewInit() {
const videoContainer = document.querySelector('.video-player');
const video = videoContainer.querySelector('video');
const self = this;
   video.addEventListener('play', function(){
    console.log(this) // In this context, "this" refers to the typescript class
    self.updateVideoIcon(this);
   });
   video.addEventListener('pause', function(){
    console.log(this) // In this context, "this" refers to the typescript class
    self.updateVideoIcon(this);
   });

}

updateVideoIcon(videoElement: any) { console.log(videoElement); // The expected value here is the video element itself rather than the typescript class }

Answer 8

Below is the solution provided for you:

ngAfterViewInit() {
const videoContainer = document.querySelector('.video-player');
const video = videoContainer.querySelector('video');
const self = this;
   video.addEventListener('play', function(){
    console.log(this) // In this context, "this" refers to the typescript class
    self.updateVideoIcon(this);
   });
   video.addEventListener('pause', function(){
    console.log(this) // In this context, "this" refers to the typescript class
    self.updateVideoIcon(this);
   });

}

updateVideoIcon(videoElement: any) { console.log(videoElement); // The expected value here is the video element itself rather than the typescript class }

The concept of 'this' in TypeScript classes compared to JavaScript's scope

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

"Authentication through Passport-twitter has encountered an issue as the request token was not located in the

Linking asynchronous AJAX requests using Angularjs

Is it possible to retrieve an array using axios?

Eliminating data type from union in Typescript

Issue with border radius in MUI 5 affecting table body and footer elements

Creating a dataset for D3 in JavaScript: A step-by-step guide

Calculating the sum of values in a JSON array using a specific parameter in Typescript

What sets apart the Jquery Function Template from the Method Template?

The problem with RXJS pipe in Angular application is that it evaluates excessively, leading to eventual breakdown

guide to utilizing npm/yarn with tsx react

Anticipate the occurrence of an event in Node.js

Error encountered while trying to display content in the rendering area

Angular not displaying input value correctly in first loop index

Revamping the login interface for enhanced user

Navigating Cross-Origin Resource Sharing (CORS) Challenges within

Guide to showcasing multiple paths of Firebase data on a single Angular page

The error message "Cannot send headers after they have already been sent to the client" is caused by attempting to set headers multiple

Jquery Issue: Safari Leaves Alert Messages Unclosed When Opening Next Alert

It is necessary to sign out users when a specific database value is set to false

Tips on obtaining the element that was used as the event selector