How to disable encoding of slashes in Angular templates

Question

I'm generating some anchors dynamically using something like the following HTML:

<li *ngFor="let menuItem of menuItems.getAll()">
    <a [routerLink]="['/', menuItem.state]"><span>{{ menuItem.name }}</span></a>
</li>

... where the list of menu items is defined like so:

const MENUITEMS = [
    {
        state: 'sys-ops/elastic-indices',
        name: 'ELASTIC INDICES'
    }
]

But when it is rendered, the slash is encoded like so...

sys-ops%2Felastic-indices

How can I disable the encoding in just that one HTML fragment?

Here is a StackBlitz that demonstrates the problem.

This seems to be a known [issue](https://github.com/angular/angular/issues/10570). There are similar questions with a few different answers. If you haven't already check out [this post](https://stackoverflow.com/questions/36597832/angular2-routerlink-breaks-routes-by-replacing-slash-with-2f), [this post](https://stackoverflow.com/questions/45367985/angular-4-router-2f-symbols-in-path), or [this post](https://stackoverflow.com/questions/48080048/angular4-route-issue-by-adding-2f-character-before-path). Best of luck! — Narm, Feb 11 '20 at 23:49

score 2 · Accepted Answer · answered Feb 12 '20 at 00:26

If routerLink input value is an array, then it treats each item array as fragment and tries to join it by '/' delimiter. If you want to append menuItem.state as it is then just set routerLink input as follow:

[routerLink]=['/' + menuItem.state]

or

routerLink="/{{menuItem.state}}"

score 0 · Answer 2 · answered Feb 12 '20 at 00:25

Honestly I would consider my implementation here, coz you are talking about escaping special chars... which calls for by passing angular dom sanitization something that's a absolute no no coz it makes you vulnerable to crossside scripting attacks. If you still want to go ahead doing this... please google bypassing angular dom sanitization and you should find something.

How to disable encoding of slashes in Angular templates

2 Answers2