CODEWITHSUNDEEP
angular
KevinS
KevinS

Reputation: 7875

How to disable encoding of slashes in Angular templates

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.

Upvotes: 1

Views: 232

Answers (2)

Ashish Patel
Ashish Patel

Reputation: 345

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}}"

Upvotes: 3

Rahul Wasnik
Rahul Wasnik

Reputation: 152

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.

Upvotes: 0

Related Questions