At the moment, I have a sidebar with clickable individual components that trigger API calls to fetch data. However, I've noticed that even when I click off a component to another one, the old component continues to refresh the API data unnecessarily.
Below is a sample test component. It displays "test component is still active" when clicked on. Even after clicking off the component, it still shows this message, indicating that the component is still running. Is there a way to stop the component once it's no longer being used? Or perhaps there's a more efficient method for obtaining fresh data?
export class TestComponent implements OnInit {
userActivity;
constructor(
) { }
ngOnInit() {
this.refreshData();
}
refreshData(){
this.userActivity = setTimeout(() => {
// where api data is called out
console.log('test component is still active');
this.refreshData();
}, 5000);
}
}