Can't bind to 'target' since it isn't a known property of 'div'

Question

I am getting this error while implementing collapse feature:

Error: Template parse errors: Can't bind to 'target' since it isn't a known property of 'div'

app.component.html:

<div *ngFor = "let ele of elements; let RowIndex = index">     {{ele.name}}      <button data-toggle="collapse"              data-target="#demo{{RowIndex}}">Toggle     </button>     <div id="demo{{RowIndex}}" class="collapse">Lorem Ipsum</div>  </div> 

But if I simply use data-target="#demo" , that is working fine. But when I am binding {{RowIndex}} than its showing error.

Answer 1

You missed property binding

<button data-toggle="collapse"          [attr.data-target]="'#demo'+ RowIndex">Toggle </button>   <button (click)="clickMe($event)">Toggle</button>  clickMe(value){     value.srcElement.innerHTML="Clicked";    } 

Answer 2

Use angular's attribute binding syntax.

Use one of the following:

<button data-toggle="collapse"          attr.data-target="#demo{{RowIndex}}">Toggle </button> 

or

<button data-toggle="collapse"          [attr.data-target]="'#demo' + RowIndex">Toggle </button>