Angular2: Router outlet not updating page if the component is same

Question

I am developing an application where I have configured router-outlet as below

{ path: 'dashboard/:id', component: DashboardComponent}

So when I click on the first link i.e dashboard/1 the page is updated. When I click on the second link dashboard/2, the page URL is updated but the view is not getting updated. But when I do a refresh it is getting updated.

My Dashboardcomponent.html is as below

<div    #coloneanchor></div>
    </div>

<div class="col-md-6">
<div   #coltwoanchor></div>
 </div>

My Dashboardcomponent.ts

@ViewChild('coloneanchor', { read: ViewContainerRef }) coloneanchor: any;
@ViewChild('coltwoanchor', { read: ViewContainerRef }) coltwoanchor: any;

this.route.params.subscribe(param => {
       this.id = param["id"];
        this.userService.getGadgets(this.id).subscribe(gadgets => {

switch(gadget)

case gadget1:
case gadget2:

Here I am creating two anchor points in my view. Once I get the id, I will pass it to an API to fetch the gadget and data and its column location. I loop through the gadgets and add them to the anchor points.

Answer 1

Try below in your DashboardComponent,

  constructor(private route: ActivatedRoute){}
  ngOnInit(){
    this.route.params.subscribe(param => {
       let id = param["id"];
       /// reload grid and charts...           
    })
  }

Hope this helps!!