Refresh component after router-link click

See more:

Angular5

Angular6

I have list component shared between various components for listing some data and a datepicker binded to an ng-model. Like

<input type="text" class="form-control"  [(ngModel)]="dateRange" 
placeholder="Pick a date range" bsDaterangepicker #dp="bsDaterangepicker"
(bsValueChange)="onDateRangeChange($event)"/>

Below are the urls formats for accessing these list component Parent Component -

http://localhost:4200/#/topics

Child Component

http://localhost/topics/Recrug-4

The issue is when I click on the parent component , the ng-model values are refreshed but when I land on the pages using the Child Components , the ngModel values are not getting refreshed

What I have tried:

As soon as the router link is clicked. I called a function to update ngmodel on the list component. For testing , I even recalled ngononit function but no sucess