Currently, I am facing an issue in Angular 2 where I call a function of a child component from the parent. The child function updates my data set which initially loads the HTML. However, when I call the function again while on the same HTML, it displays in the console that the data set has been loaded with new data but does not refresh the HTML. Here is the full scenario: I have a search bar in my header section. It redirects to the result page and also calls its function to display query data. When I have already searched once and am on the result page, if new data is queried, the function is called again, updating the data set. However, the component does not reload the HTML according to this updated data set. How can I force a reload? Any suggestions or ideas on this matter? Here are some code samples: my header.ts
Search(){
localStorage.setItem('val',JSON.stringify(this.query));
this.router.navigate(['/results']);
this.mobiles.ngOnInit();
}
}
and resuls.ts
ngOnInit() {
this.query=JSON.parse(localStorage.getItem('val'));
alert(this.query)
this.httpService.searchGeneric(this.query,1).subscribe(
data => {
this.Getspecs = data;
this.count=data['totalItems'];
this.ref.detectChanges();
this.ref.reattach();
console.log(data)
}
);
Why aren't the new changes appearing in the HTML of the result component? Any help or insights would be greatly appreciated. Thank you.