Simon Visser Simon Visser - 2 years ago 86
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

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

This works fine but in my app, instead of getting the directive
, I instead get
(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)">

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)">
<button *ngIf="!someCondition" ion-item *ngFor="let item of this.root" (click)="openItem(item)">

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