Angular 9 routerLink resolving semi-colon to %3B

Question

How can I prevent Angular 9 from rendering routerLink hrefs with URL encoding?

Here is a stackblitz example of the problem, of the below example:

https://angular-ivy-sxczmy.stackblitz.io/

typescript:

myurl = "/testing;parameter1=abc";

template:

<p>myurl = {{myurl}}<p>
<a [routerLink]="myurl">Testing</a>

Simplified Output:

<p>myurl = /testing;parameter1=abc</p>
<a href="/testing%3Bparameter1%3Dabc">Testing</a>

How do I prevent the href from rendering with %3B, %3D rather than semi-colon and equals?

Thank you!

Answer 1

Angular doesn't work that way to handle query params, you must declare them separatly :

<a routerLink="/testing" [queryParams]="{parameter1: 'abc'}">Testing</a>

Answer 2

You should create a separate object for the params and then pass it inside the [routerLink], in your case:

myurl = "/testing";
myUrlParams = {parameter1: 'abc'}

<a [routerLink]="[myurl, myUrlParams]">Testing</a>