Dynamic attribute name in Angular2

Question

I'm currently building an application in Angular2. In this application i grab my menu items from an array that is built like this:

this.navigationItems = [
    {
        name: 'Name',
        url: ['/url'],
        attributes: [
            {
                customAttribute: 'key="value"'
            }
        ]
    }
}

My template looks like this:

<footer id="app-navigation">
    <ul class="app-navigation__list">
        <li class="app-navigation__item" *ngFor="let item of navigationItems"><a [routerLink]="item.url">{{ item.name }}</a>
            <ul class="app-navigation__sublist" *ngIf="item.subitems">
                <li class="app-navigation__subitem" *ngFor="let subItem of item.subitems"><a>{{ subItem.name }}</a></li>
            </ul>
        </li>
    </ul>
</footer>

I want to be able to insert the assigned attribute, if it exists. Say i have the "page" as name, and a custom attribute, i want to insert the attribute into my template, as it is in the object.

Does my explanation make any sense, if not i'd be glad to deepen. Long story short, want to

<a #CUSTOMATTRIBUTE-IF-PRESENT#>{{ item.name }}</a>

Thanks in advance :)

[you can't do that](http://stackoverflow.com/questions/37582292/angular-2-event-binding-use-interpolation-doesnt-work-inside-template/37582360#37582360) — drew moore, Jul 10 '16 at 16:16
That answered my question perfectly, thanks. It does make sense that it is not possible. Do you have any suggestions for a different approach? The concept is that i'd like to be able to call a modal (component) only on certain navigation items. — StevenThelin, Jul 10 '16 at 17:20

Dynamic attribute name in Angular2

0 Answers0