Angular2 routerLink fragment with variable

Question

Is it possible to do something like:

<ul>
    <li *ngFor="let language of languages">
        <a [routerLink]="['#' + language]">{{language}}</a>
    </li>
</ul>

or

<ul>
    <li *ngFor="let language of languages">
        <a fragment="language">{{language}}</a>
    </li>
</ul>

to keep the same url and add #en, #es or #fr depending on what language value is? I can't make it work.

Answer 1

You can try something like this:

<ul>
    <li *ngFor="let language of languages">
        <a [routerLink]="" fragment="language">{{language}}</a>
    </li>
</ul>

This works in my case.

OR, if that doesn't work, you can try

<ul>
    <li *ngFor="let language of languages">
        <a [routerLink]="" fragment="{{language}}">{{language}}</a>
    </li>
</ul>

Answer 2

<a routerLink="" fragment="section-a">Section A</a>
<a routerLink="" fragment="section-b">Section B</a>

UPDATE 1:

An example at stackblitz:

https://stackblitz.com/edit/angular-routing-section-example