RangeError: Maximum call stack size exceeded

[minicatsCB]

Angular version: 5.2.9

ngx-pagination version: 4.0.0

Description of issue: I have an Ionic with Angular application. I created a custom component which receives two input params currentStep and totalItems. As you can see in the attached Stackblitz, we start in the HomeComponent page. If we click the "ClickMe" button, we go to the InstructionsPage, which makes use of the custom pagination template. The thing is that, if I press the "Go back" button, I return to HomeComponent but, if I press the "ClickMe" button again, an error is thrown.

Demo: https://stackblitz.com/edit/ionic-5s2qwc

Sorry, I know there are other similar issues in this repo, but none of then have worked for me or I haven't been able to catch the error in my code.

[snakone]

This happens when you subscribe to pagination changes and emit a new event in the same response. That makes a infinite loop

[michaelbromley]

I am not familiar with Ionic or how it interacts with Angular, but by putting a few console.log calls in your demo, it seems that the ngOnDestroy method of InstructionsComponent is not called when navigating away with the "go back" button. However, the constructor is called each time "click me" is clicked, which means you are setting up multiple setInterval callbacks that run simultaneously.

This is likely to be the cause of the error. I would advise that you consult the Ionic documentation to see the correct place to put clean-up logic so it will run when navigating away from a component. Perhaps they have their own Ionic-specific lifecycle hooks?