How to disable dynamically generated URL encoding on ` [routerLink]` in Angular 8?

Question

I have [routerLink] as below;

 <li *ngFor="let item of pageNumbers" class="page-item">
      <a
        class="page-link"
        [routerLink]="getPageUrl(item) | async"
        routerLinkActive="active"
        >{{ item }}</a
      >
    </li>

And getPageUrl method is like;

public getPageUrl(pageNumber: number): Observable<string> {
    const url: Observable<string> = this.route.url.pipe(
      map((segments: UrlSegment[]) => {
        let segmentsString = segments.join("/");
        let pageUrl = `/${segmentsString}?startIndex=${pageNumber}`;
        return pageUrl;
      })
    );
    return url;
  }

But on browser angular shows url like below;

http://localhost:3005/documents%3FstartIndex%3D1

desired:

http://localhost:3005/documents?startIndex=1

Am I missing something here? I would simply bind pagination directly to [routerLink], but there will be more query string parameters (filters, sorting) will get in to URL, that’s why I am trying to generate URL dynamically.

can you check [this](https://stackoverflow.com/questions/46440887/url-encoding-breaking-angular-2-navigation) — Naren Murali, Mar 23 '20 at 04:37
URL you supplied mentions about `router.navigate()`. I don't want to handle that, I want my generated URL to be appeared non-encoded. — Teoman shipahi, Mar 23 '20 at 04:39
I don't want to navigate dynamically. I want URL to be appear once you mouse over the href, so people can bookmark it. — Teoman shipahi, Mar 23 '20 at 04:40

Daniel · Accepted Answer · 2020-03-23T04:56:09.323

12

Check the docs for RouterLink:

[routerLink] is used to pass what comes before the ?, called "params".
[queryParams] is used to pass what comes after the ?, called "query params".

So, to solve your issue, a possible solution is to return an object from getPageUrl instead of a string, the object will have both the params and query params:

public getPageUrl(pageNumber: number): Observable<string> {
    return this.route.url.pipe(
      map((segments: UrlSegment[]) => {
        return {params: segments, queryParams: {startIndex: pageNumber};
      })
    );
  }

and you use it like this:

<a *ngIf="getPageUrl(item) | async as url"
   class="page-link"
   [routerLink]="url.params"
   [queryParams]="url.queryParams">{{ item }}</a

Notice you don't need to join the query segments with /, because routerLink accepts an array too.

edited Mar 23 '20 at 04:56

answered Mar 23 '20 at 04:54

Daniel

21,933
14
72
101

1

I just noticed `queryParams` is the thing I need to use. Thanks for the helpful post. – Teoman shipahi Mar 23 '20 at 04:56
You don't need to conouted the URL at all. Just pass `routerLink="."` and then the queryParams. Essentially no TS needed for this. – Ingo Bürk Mar 23 '20 at 05:49
Also make sure to take a look at queryParamsHandling if you have other query parameters as well. – Ingo Bürk Mar 23 '20 at 05:50
queryParamsHandling with merge promising, I did not notice that. Thanks! – Teoman shipahi Mar 23 '20 at 18:34
what if we get url from an api and not the angular router? how should we parse it and split url/queryparams? – Mackelito Jul 08 '21 at 15:01

How to disable dynamically generated URL encoding on ` [routerLink]` in Angular 8?

1 Answers1