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.

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
– Teoman shipahi, Commented Mar 23, 2020 at 4: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
– Teoman shipahi, Commented Mar 23, 2020 at 4:40

DWilches · Accepted Answer · 2020-03-23 04:56:09Z

15

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, 2020 at 4:56

answered Mar 23, 2020 at 4:54

DWilches

23.4k17 gold badges82 silver badges113 bronze badges

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

5 Comments

Teoman shipahi Over a year ago

I just noticed queryParams is the thing I need to use. Thanks for the helpful post.

Ingo Bürk Over a year ago

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 Over a year ago

Also make sure to take a look at queryParamsHandling if you have other query parameters as well.

Teoman shipahi Over a year ago

queryParamsHandling with merge promising, I did not notice that. Thanks!

Mackelito Over a year ago

what if we get url from an api and not the angular router? how should we parse it and split url/queryparams?

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related