lifecycle-hook

HomeComponent ngOnInit() { console.log('loaded'); this.retrieveData(); } retrieveData() { // this.dataService.getData().subscribe(...); } I am retrieving data when the component loads. When the user clicks on another routerLink , for example, SettingsComponent and returns back to the HomeComponent , the function of course, is called again because the component has loaded again. But Everytime I return back to the component, it makes the function call again which creates too many unwanted HTTP requests. I need to prevent this and make sure the function is called only the first time. How do I do

Here the statements in test method is called multiple times. Why is this happening? Is DOM is recreated by AngularJS2 multiple times? import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<div>Method Call {{test()}}</div>>` }) export class AppComponent { name = 'Angular'; test() { console.log("Test is called"); } } {{test()}} is evaluated every time Angular runs change detection, which can be quite often. Binding to function or methods from the view is discourages. Prefer assigning the result of the method call to a property and bind to this property instead.