Angular 8 side navigation to load same component with different data

Question

I have component SideNavbar like below and both links are pointing to another component Page1. But both Side1 & Side2 are invoking same Page1 component. My requirement is on click of Side1 need to pass some parameter to component Page1 and display some grid data and on click of Side2 again load the same component Page1 and pass the parameter to component and load the same grid with different data. Please let me know how to invoke the same Page1 component method from SideNav component Side1 & Side2 click.

SideNavBar component:

<a routerLink="/Page1" [routerLinkActive]="['router-link-active']" class="list-group-item"><i class="fa fa-calendar-plus-o"></i>&nbsp;<span>{{ 'Side1'}}</span></a>

<a [routerLink]="['/Page1']" [routerLinkActive]="['router-link-active']" class="list-group-item"><i class="fa fa-calendar"></i>&nbsp;<span>{{ 'Side2'}}</span></a>

Answer 1

Why not you pass the information in queryParams.

Case 1: If you are using routerLink:

<a [routerLink]="['/page1']" [queryParams]="{prop: 'xxx'}">Somewhere</a>

Case 2: If routing is done from a method:

this.router.navigate(['/page1'], {queryParams:{prop: 'xxx'}});

In the page one component, subscribe to queryParams:

ActivatedRoute.queryParams.subscribe(query => {
  console.log(query.prop)
});

Inorder to reload the route on queryparams change, add runGuardsAndResolvers: 'paramsOrQueryParamsChange' to the route configuration.

  {
    path: "/page1",
    component: PageOneComponent,
    runGuardsAndResolvers: 'paramsOrQueryParamsChange'
  }