Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

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

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.

8 months ago · Santiago Trujillo
3 answers
Answer question

0

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";

  }
8 months ago · Santiago Trujillo Report

0

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>
8 months ago · Santiago Trujillo Report

0

use property binding : attr.data-target="{{your-target}}"

8 months ago · Santiago Trujillo Report
Answer question
Find remote jobs