4

I have a component toolbar with template:

<div *ngFor="let item of items" class="toolbar__item">
  <a href="{{ item.url }}" [attributes]="item.attributes">{{ item.label }}</a>
</div>

I want to bind an array of item.options to an A element. How to do it with Angular 5?

const items = [
  { 'url': 'someurl', 'label': 'Label', 'attributes': {'data-target': '#dropdown', 'data-toggle': 'dropdown'} }
]
Improve this question
7
  • You could create a Directive. Anchors do not have any such property ordinarily. However, this seems confusing and I'd suggest thinking over your reasons for wanting it. Or... are you trying to set the corresponding attributes dynamically on the target? It is unclear. Commented Apr 11, 2018 at 6:43
  • Thank you for answer. Why it seems confusing to you? Imagine a toolbar with multiple buttons: one button triggers a dropdown menu and other one triggers a sidebar navigation. So I need different data attributes to be set for them. Commented Apr 11, 2018 at 6:57
  • So options are just attributes? If they are, call them attributes! Commented Apr 11, 2018 at 6:59
  • Yes, options are just data-attributes. I expect to get a result HTML as <a href="someurl" data-target="#target" data-toggle="dropdown">Label</a> Commented Apr 11, 2018 at 7:02
  • Well, that's not supported syntactically by Angular but you could presumably create a directive that worked that way. Please fix your naming. If you used the sensible name, we could have saved significant time. Commented Apr 11, 2018 at 7:03

1 Answer 1

Reset to default
4

I expect you could create a directive that would store and assign dynamic attributes to an element but I've not tested it.

import {Directive, ElementRef, Input} from '@angular/core';

@Directive({
  selector: '[dynamicAttributes]'
})
export class DynamicAttributesDirective {
  @Input() dynamicAttributes: {[key: string]: string};

  constructor(public element: ElementRef<HTMLElement>) {}

  ngOnInit() {
    Object.assign(this.element.nativeElement.attributes, this.dynamicAttributes)
  }
}

And you would consume it as follows

<a href="{{item.url}}" [dynamicAttributes]="item.attributes">{{item.label}}</a>
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Sorry, does not work. An error occurred: Can't bind to 'dynamicAttributes' since it isn't a known property of 'a'. Directive has been attached in @NgModule declarations of app.module.ts file
@karminski did you add it to an NgModule? You have to do that because Angular does not do any dependency analysis (you must explicitly register everything). Directives, like Components, go in declarations.
yes I do that. If rename dynamicAttributes to appAttributes an error disappears, but attributes does not append to an element.
Sorry, had a typo. The name of the property and the directive need to match and now they do. Use [dynamicAttributes].
Ok. It rendered as <a _ngcontent-c1="" ng-reflect-dynamic-attributes="[object Object]" href="#">Label</a> :)
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.