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?

Katya Pavlenko · Accepted Answer · 2020-05-14 10:55:41Z

0

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

answered May 14, 2020 at 10:55

Katya Pavlenko

3,4033 gold badges19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Routing in angular 9 with parameters from href

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related