Angular 10 adding numbers

Question

loadingPercent: number = 0;

  ngOnInit(): void {
    window.setInterval(function() {
      console.log(loadingPercent + 10);
    }, 1000);
  }

I am trying to simply add 10 every second but I get the answer NaN. I am using typescript in Angular 10. Why is simple addition so difficult?

Answer 1

What is happening is inside setInterval function? You are not accessing the class scope.

This could be solved in three ways.

Option 1:

Use arrow function for setInterval that will explicily binds the scope inside setInterval to your class scope.

ngOnInit(): void {
  setInterval(() => {
    this.increment();
  }, 1000);
}

increment() {
  this.loadingPercent = this.loadingPercent + 10;
  console.log(this.loadingPercent);
}

Working Fiddle

If you are not using arrow function, you need to bind scope manually.

Option 2

 loadingPercent = 0;

 ngOnInit(): void {
    var that = this;
    setInterval(function() {
        that.increment();
    }, 1000);
  }

increment() {
    this.loadingPercent = this.loadingPercent + 10;
    console.log(this.loadingPercent);
}

Working Fiddle.

Option 3

  loadingPercent = 0;

  ngOnInit(): void {
      setInterval(this.increment.bind(this), 1000);
  }

  increment() {
      this.loadingPercent = this.loadingPercent + 10;
      console.log(this.loadingPercent);
  }

Working Fiddle.