unable to access this object in directive angular4

Question

I am creating HTMLImageElement in the angular directive.

ngAfterViewInit() {
    this.renderer.setAttribute(this.el.nativeElement, "src", this.onePxlImgPlaceHolder);

    // create HTML image element to load image in the background
    this.dynamicImg = new Image();
    // register the function that will be called on image load
    this.dynamicImg.onload = function () {
        this.renderer.setAttribute(this.el.nativeElement, "src", this.dynamicImg.src);
    };

    this.dynamicImg.src = this.originalImgSrc;
}

Inside the ngAfterViewInit, this object is available but inside the function that is registered with onload is not available, so I cannot access renderer and el. Inside onload function, this object refers to the element itself.

I have even tried

this.dynamicImg.onload = function () {
            this.renderer.setAttribute(this.el.nativeElement, "src", this.dynamicImg.src);
    }.bind(this);

not working!! What is the solution?

score 3 · Accepted Answer · edited Apr 23 '18 at 11:10

3

You can use an arrow function to keep the scope:

this.dynamicImg.onload = () => {
  this.renderer.setAttribute(this.el.nativeElement, "src", this.dynamicImg.src);
};

This answer provides an in-depth explanation of the differences between arrow and normal functions in Javascript, including how they handle this

edited Apr 23 '18 at 11:10

Sunil Garg

14,608
25
132
189

answered Apr 23 '18 at 10:54

bugs

14,631
5
48
52

unable to access this object in directive angular4

1 Answers1