angular2 store routerlink in model

Question

I'm trying to create a dynamic tree-menu in Angular2. I can get my menu out on the page using the following template file

<template [ngIf]="menuItem">
        <li *ngFor="#item of menuItem" [ngClass]="{active: item.active}">
            <a (click)="item.toggle()"><i class="{{item.Icon}}"></i>{{item.Name}} <template [ngIf]="item.Level.length >= 1"><i class="{{item.caret()}}"></i></template></a>
            <template [ngIf]="item.expanded"><template [ngIf]="item.Level.length >= 1">
                <ul my_pages_menu_item [menuItem]="item.Level"></ul>
            </template></template>
        </li>
</template>

And storing my menu in an array at the moment

export var ITEMS: MenuItem[] = [
    new MenuItem('Kontrollpanelen', '/control', 'fa fa-bar-chart', '', false, false, []),
    new MenuItem('Min profil', '/profile', 'fa fa-user', '', true, true, [
        new MenuItem('Personlig information', '#', '', '', false, false, [
            new MenuItem('Omdömen', '#', '', '', false, false, [])
        ])
    ])
];

and router config as follows

@RouteConfig([
    {path:'/controlpanel', name: 'ControlPanel', component: ControlPanelComponent, useAsDefault: true},
    {path:'/profile', name: 'Profile', component: ProfileComponent},
])

But I'm trying to add a [routerLink] to the a-tag with no success. Statically typing:

<a [routerLink]="['Profile']"></a>

works, but I don't know the menu structure at compile. going with

<a [routerLink]="{{item.Link}}>
<a [routerLink]="['{{item.Link}}']>

doesn't work

My MenuItem class looks the following

export class MenuItem {
    constructor(public Name:string,
        public Link:string,
        public Icon:string,
        public CssClass:string,
        public expanded: boolean,
        public active: boolean,
        public Level:Array<MenuItem>
    ) {}
}

Is there anyway to store a routerlink in a class or create a routerlink on runtime?

Günter Zöchbauer · Accepted Answer · 2018-12-31 07:01:18Z

1

You can't use brackets [prop] and ="{{}}" at the same time.

This should work:

<a [routerLink]="[item.Link]">

edited Dec 31, 2018 at 7:01

answered Feb 9, 2016 at 14:34

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular2 store routerlink in model

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related