Angular template rendering non-encoded URL

Question

How do I render a URL which is not encoded. Below is a sample

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'demo-app',
  template: `<a [routerLink]="stringURL">Click here</a>`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  stringURL:string;

  constructor(){
    this.stringURL = "/url;mode=3"
  }
}

The URL in the template has encoded string like /url%3Bmode%3D3 and I want it like /url;mode=3

How can I achieve this.

Here's the sample : https://stackblitz.com/edit/angular-q6mf3p

Thanks

Answer 1

You have to disable angular default URL encoding.

This post explains the solution quite well.

Answer 2

If the link is static, you can use the directive as follows: link to user component

If you use dynamic values to generate the link, you can pass an array of path segments, followed by the params for each segment.

For instance ['/url',{mode: 3}] means that we want to generate a link to /url;mode=3.

you code will work see this new link click to see

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'demo-app',
  template: `<a [routerLink]="stringURL">Click here</a>`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  stringURL:any;

  constructor(){
    this.stringURL = ["/url",{mode:3}]
  }
}