NgFor Button with router link inside

Question

i want to ask if there is a way for do this

<button *ngFor="let link of links" routerLink="{{link.value}} <<<<  (i want to insert value from array to this
">{{link.Name}}</paper-button>

links = [
{Name:'Menu1' , value:'/Menu1'},
{Name:'Menu2' , value:'/Menu2'},
]

and in my router-module,

{ path: 'Menu1',  component: Menu1Component },
{ path: 'Menu2',  component: Menu2Component },

What's the problem? – Günter Zöchbauer Feb 03 '17 at 09:19 — Günter Zöchbauer, Feb 03 '17 at 09:19

score 1 · Answer 1 · answered Feb 03 '17 at 09:21

1

By using the notation [routerLink] instead of routerLink, you can pass instance properties to the value. In your case it would be:

<button *ngFor="let link of links" [routerLink]="link.value">
    {{link.Name}}
</paper-button>

answered Feb 03 '17 at 09:21

Bertofer

770
6
18

1

Works the same with `{{}}` as long as it's only a string value. – Günter Zöchbauer Feb 03 '17 at 09:27

NgFor Button with router link inside

1 Answers1