End interval when route changes in Angular 2

Question

I start a timer in an Angular 2 component which is inside a router outlet.

setInterval(() => {
    ...
}, 10000);

When I leave the route in which the component is embedded the timer isn't quit. How can I achieve that?

Answer 1

You could clear the interval from this hook. Mine is controlled from the component/view.

export classTestInterval implements OnInit, OnDestroy{
     public timerInterval:any;
     ngOnInit(){
       // Need interval scope in the component could be from somewhere else, but we need scope to be able to clear it on destruction of component.
       this.timerInterval = setInterval(function(){...},10000);
     }
     ngOnDestroy() {
        // Will clear when component is destroyed e.g. route is navigated away from.
        clearInterval(this.timerInterval);
     }
}