How to navigate to html id with [routerLink]

Question

I need to navigate to html id with [routerLink]

blog.ts:

tabsOverview: any = [
    {title: 'How to create project', url: 'create-project', id: 'create-project'},
    {title: 'How to invite collaborators', url: 'create-project', id: 'invite-collaborator'},
    {title: 'Manage subscription', url: 'create-project', id: 'manage-subscription'}
];

blog.html:

<li *ngFor="let tab of tabsOverview">
   <a class="list-group-item border-0" routerLinkActive="active" [routerLink]="[tab.url]">{{tab.title}}</a>
 </li>

change your code to `[routerLink]="tab.url"` – Joel Joseph Sep 27 '19 at 09:36 — Joel Joseph, Sep 27 '19 at 09:36

score 2 · Answer 1 · answered Sep 27 '19 at 09:37

2

Try to write without square brackets [] like that:

<a class="list-group-item border-0" routerLinkActive="active" [routerLink]="tab.url">

answered Sep 27 '19 at 09:37

StepUp

36,391
15
88
148

score 0 · Answer 2 · answered Sep 27 '19 at 09:41

0

Remove the [] from the tab.url.

Just this [routerLink]="tab.url".

Explanation: when you write something in [], Angular expects an input, and the input you are providing with that code is an Array. The problem is that routerlink is expecting a string.

answered Sep 27 '19 at 09:41

Ferie

1,358
21
36

How to navigate to html id with [routerLink]

2 Answers2