Simon Visser Simon Visser - 1 year ago 54
TypeScript Question

Capitalization in angular's dynamic attribute directive

I'm using Angular 2 and Ionic 2 to build an app. Currently, I'm building a dynamic side menu. Ionic provides a directive called

menuClose
to signify that clicking a button will close a side menu.

I need to add that directive to some but not all buttons in my side menu conditionally, so I decided to use the
[attr.menuClose]="..."
construct.

This works fine but in my app, instead of getting the directive
menuClose
, I instead get
menuclose
(note capitalization).

Can I somehow get Angular 2 to respect my chosen capitalization?

My Template

<button [attr.menuClose]="''" ion-item *ngFor="let item of this.root" (click)="openItem(item)">
{{item.text}}
</button>


The result I get:

<button class="item-block item item-ios" ion-item="" tappable="" menuclose="">

Answer Source

Using [attr.some-attribute] is used for conditionally setting an actual html element like src or href or name or id, but not for binding a attribute directive.

Instead you will need to do something like:

You can do something like this:

<button *ngIf="someCondition" menuClose ion-item *ngFor="let item of this.root" (click)="openItem(item)">
  {{item.text}}
</button>
<button *ngIf="!someCondition" ion-item *ngFor="let item of this.root" (click)="openItem(item)">
  {{item.text}}
</button>

This is not ideal as you have code duplication.

A better option would be to see how menuClose works, and extend it to except a condition.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download