Behaviour after scroll event

Question

I have a problem using Angular2. If I'm not mistaken in Angular2 I should put my code in class instead of controller and access variables by this but I have a variable I want to access from function assigned to window.onscroll, and this inside this function doesn't work, because it return window.

How can I access my variables or functions on scroll event?

class someClass{

    someVariable;

    ngOnInit() {
        this.someVariable = {}; 

        window.onscroll = function() {

            // here I want to access someVariable or someFunction

        }
    }

    someFunction() {
    }

}

yurzui · Accepted Answer · 2016-06-04 21:20:27Z

4

I see several way to do that:

1) Using HostListener:

@HostListener('window:scroll') onScroll() {
  console.log(this.someVariable);
}

2) Using arrow function:

window.onscroll = _ => {
  console.log(this.someVariable);
};

3) Using of Function.prototype.bind():

window.onscroll = function() {
  console.log(this.someVariable);
}.bind(this);

4) Keep context in a variable like self or that:

let self = this;
window.onscroll = function() {
  console.log(self.someVariable); // <== notice self instead of this
};

answered Jun 4, 2016 at 21:20

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Behaviour after scroll event

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related