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.
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";
}
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>
use property binding : attr.data-target="{{your-target}}"