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

Issue

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?

Solution

it is easy with Angular API:

1. https://angular.io/api/router/RouterLink
2. How to pass query parameters with a routerLink

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

Hope it helps :)

Answered By - NgDaddy