Routing in angular 9 with parameters from href

Question

I want to implement the routing functionality in Angular 9 however it is not straight forward with url routing in the address bar. Below is the sample code

<ng-container>
  <ul>
    <li>Home Page</li>
    <li><a href='http://localhost:2000/Report1.html?a=1&b=1&c=1&d=2'>Report1</a></li>
    <li><a href='http://localhost:2000/Report2.html?a=1&b=1&c=1&d=2'>Report2</a></li>
    <li><a href='http://localhost:2000/Report3.html?a=1&b=1&c=1&d=2'>Report3</a></li>
    <li><a href='http://localhost:2000/Report4.html?a=1&b=1&c=1&d=2'>Report4</a></li>
  </ul>
  <div> 
     -- content here--
  </div>
</ng-container>

How do I route to different pages based on the user response and show them in the above given div tag?

Once the page is routed how do I get the parameters while the page is loaded?

Answer 1

try this

<a [routerLink]="['report1']" [queryParams]="{a:'1', b: '2'}"></a>
<a [routerLink]="['report2']" [queryParams]="{a:'1', b: '2'}"></a>

you should have report1 and report2 routes specified in your RouterModule

this question answers should help you deeper How to handle query parameters in angular 2