Working with Angular 8, I have a setup with two components: the parent component and the child component.
The parent component needs to pass an object or string when the URL parameters change.
In the parent component, I implemented this code snippet that detects changes in the URL and sets the urlParam for the child component:
this.activatedRoute.queryParamMap.subscribe((paramMap: ParamMap) => {
this.urlParam = JSON.stringify(paramMap);
});
Parent HTML:
<search [searchCriteriaForm]="searchCriteriaForm" [urlParam]="urlParam"></search>
In the child component, I added the following:
@Input() set urlParam(urlParam: string) {
console.log('The child has successfully received it');
}
Although the data reaches the parent component when the URL changes, unfortunately, the child component does not receive it.
I noticed that upon initially loading the page, the child component receives the parameters perfectly. However, if I navigate to a different URL without reloading or refreshing the browser page, only the parent component is able to access the updated data.