How to add a interpolation without escaping URL encoding in Angular 17?

Question

I want to add a routeLink with full URL value defined in a string using Angular interpolation but when the page is executed it escape the URL.

Expected: http://localhost:4200/books?page=3&sort=title
Returned: http://localhost:4200/books%3Fpage%3D3&sort%3Dtitle

<li *ngFor="let pageUrl of pageUrls" class="page-item">
  <a class="page-link" routerLink="{{ pageUrl.url }}">{{ pageUrl.index }}</a>
</li>

I know the escape is important for passing values correctly but is there any pipe or solution for this case?

Joy Biswas · Accepted Answer · 2024-01-08 07:43:19Z

4

it is easy with Angular API:

<a class="page-link" 
  routerLink="/books" 
  [queryParams]="pageUrl.urlQueryParams">
  {{ pageUrl.index }}
</a>

Hope it helps :)

Joy Biswas

6,5371 gold badge26 silver badges50 bronze badges

answered Jan 7, 2024 at 21:39

Pawel Twardziak

8321 silver badge6 bronze badges

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

1 Answer 1