Angular not working inside attribute html

Question

Hi Everybody, I want to Set data-toggle = variable {{hero.ID}} but it not working

And My code Angular

<tr *ngFor="let hero of result" id="{{hero.iID}}">
        <td class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" (click)="checkedItem('check'+hero.iID)" id="check{{hero.iID}}" name="checkItem"
              type="checkbox" value="">
            <span class="form-check-sign">
              <span class="check"></span>
            </span>
          </label>
        </td>
        <td (click)="fDetail(hero.iID,hero.dBirthDay,hero.dCreateDate,hero.nAddress,hero.nEmail,hero.nFullName,hero.nGender,hero.nPassWord,hero.nPhone,hero.nUserName)"
          data-toggle="{{hero.iID}}" data-target="#exampleModal" [ngStyle]="{'color':hero.iActive?'#3c4858':'red'}">{{hero.nFullName}}</td>
        <td (click)="fDetail(hero.iID,hero.dBirthDay,hero.dCreateDate,hero.nAddress,hero.nEmail,hero.nFullName,hero.nGender,hero.nPassWord,hero.nPhone,hero.nUserName)"
          data-toggle="{{hero.iID}}" data-target="#exampleModal" [ngStyle]="{'color':hero.iActive?'#3c4858':'red'}">{{hero.nPhone}}</td>
        <td (click)="fDetail(hero.iID,hero.dBirthDay,hero.dCreateDate,hero.nAddress,hero.nEmail,hero.nFullName,hero.nGender,hero.nPassWord,hero.nPhone,hero.nUserName)"
          data-toggle="{{hero.iID}}" data-target="#exampleModal" [ngStyle]="{'color':hero.iActive?'#3c4858':'red'}">{{hero.nUserName}}</td>
        <td (click)="fDetail(hero.iID,hero.dBirthDay,hero.dCreateDate,hero.nAddress,hero.nEmail,hero.nFullName,hero.nGender,hero.nPassWord,hero.nPhone,hero.nUserName)"
          data-toggle="{{hero.iID}}" data-target="#exampleModal" [ngStyle]="{'color':hero.iActive?'#3c4858':'red'}">{{hero.nAddress}}</td>
        <td (click)="fDeletes(hero.iID,hero.iActive)" class="btn {{hero.iActive?'btn-danger':'btn-info'}}">{{hero.iActive?"Disabled":"Active"}}</td>
  </tr>

And My Error:

Can't bind to 'toggle' since it isn't a known property of 'td'. ("s,hero.nEmail,hero.nFullName,hero.nGender,hero.nPassWord,hero.nPhone,hero.nUserName)"
          [ERROR ->]data-toggle="{{hero.iID}}" data-target="#exampleModal" [ngStyle]="{'color':hero.iActive?'#3c4858':'re"): ng:///AppModule/CustomersComponent.html@221:14

Finnally: How to set attribute data-toggle={{hero.ID}} working? Or the same?

Pardeep Jain · Accepted Answer · 2019-02-13 05:25:24Z

1

Angular by default uses property binding but data-toggle doesn't have a property for. To tell Angular explicitly to use attribute binding, use instead:

[attr.data-toggle] = "hero.iID"

answered Feb 13, 2019 at 5:25

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

1 Comment

Pardeep Jain Over a year ago

@LongHoàngNguyễn Curious to know how you added smili in comments section :P

Sachila Ranawaka · Accepted Answer · 2019-02-13 05:25:09Z

1

Try using attr for binding

[attr.data-toggle]="hero.iID"

answered Feb 13, 2019 at 5:25

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Collectives™ on Stack Overflow

Angular not working inside attribute html

And My code Angular

And My Error:

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

And My code Angular

And My Error:

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related