Dynamically assign a variable value to a html attribute

Question

I'm trying to create a button that upon clicking would open a certain modal that is decided by the controller in a variable instead of just having multiple buttons that have the same attributes but with different data-targets

So this is one of the buttons that I was using earlier

      <button mat-menu-item class="menu-item" *ngIf="isReady"
              data-toggle="modal" data-target="#ready-modal">
        <span>View Ready</span>
      </button>

and here's what I came up with

      <button mat-menu-item class="menu-item" data-toggle="modal"
        data-target="{{action.dataModalTarget}}" (click)="this[action.clickFunction](event)">
          <span>{{action.translationKey | translate}}</span>
      </button>

however, this throws the following exception,

Can't bind to 'target' since it isn't a known property of 'button'. ("      <button mat-menu-item class="menu-item" data-toggle="modal"

is this even doable or not ?

Akshay Rana · Accepted Answer · 2019-11-04 10:14:20Z

4

You can do it via attribute binding, just like you bind properties and events, the syntax for attribute binding is:

[attr.<attribute_name>]="value"
[attr.data-target]="action.dataModalTarget"

Reference: Angular doumentation

edited Nov 4, 2019 at 10:14

answered Oct 31, 2019 at 16:40

Akshay Rana

1,51512 silver badges21 bronze badges

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

1 Comment

user1712638 Over a year ago

Thank you, could you tell me what attr refer to, or guide me to somewhere I can read a bit more about this ?

Collectives™ on Stack Overflow

Dynamically assign a variable value to a html attribute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related