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.

Why you need data attributes in angular? – Ravinder Payal Dec 06 '18 at 06:29 — Ravinder Payal, Dec 06 '18 at 06:29

score 170 · Accepted Answer · edited Jul 26 '17 at 17:46

170

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

  }

edited Jul 26 '17 at 17:46

msanford

11,803
11
66
93

answered Apr 13 '17 at 07:57

Aravind

40,391
16
91
110

11

I didnt get you. elaborate – Aravind Apr 13 '17 at 09:12
i want that my text 'Toggle' which is written on the button, will changeable when I clicked on the button while toggle. – Er Vipin Sharma Apr 13 '17 at 09:20
you want to change from component or from where? – Aravind Apr 13 '17 at 09:22
whatever will be the easiest way. I have both options '.ts' and '.html' . – Er Vipin Sharma Apr 13 '17 at 09:24
when you want to handle it pls tell I will help/ – Aravind Apr 13 '17 at 09:24
when i click on button, the text should change. – Er Vipin Sharma Apr 13 '17 at 09:26

score 51 · Answer 2 · answered Apr 13 '17 at 08:10

51

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>

answered Apr 13 '17 at 08:10

Amit

4,274
21
25

14

Just to make things clear, it doesn't count as a duplicate of your answer if you edit it after the fact. This was my answer before you edited, not that I care. – Amit Aug 13 '17 at 20:49

score 2 · Answer 3 · answered Oct 16 '18 at 16:43

2

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

answered Oct 16 '18 at 16:43

Achraf Farouky

813
10
11

score -1 · Answer 4 · answered Nov 28 '19 at 06:55

You can use href tag instead of div. you can check the below code

<div class="card" *ngFor="let service of servicesArr;let i = index">
  <a data-toggle="collapse" href="#{{i}}{{service.name}}">{{service.label}}</a>
  <div id="{{i}}{{service.name}}" class="collapse">
     Lorem ipsum dolor text....
  </div>
</div>

score -2 · Answer 5 · answered Dec 13 '21 at 18:52

<ng-container matColumnDef="opciones">

 <th mat-header-cell *matHeaderCellDef> Opciones </th>
 <td mat-cell *matCellDef="let item" class="text-center" role="button">  
  <a [routerLink]="['/panel/clientes',item._id]" matTooltip="Editar"><i class="bi bi-pencil-square"></i></a>&nbsp;
  <a role="button" data-bs-toggle="modal" href="#delete-{{item._id}}" matTooltip="Borrar"><i class="bi bi-trash-fill"></i></a>
  
  <!-- Modal -->
  <div class="modal fade"  id="delete-{{item._id}}" tabindex="-1" aria-hidden="true">
  ....**strong text**    
  </div>

 </td>
</ng-container>

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Dec 13 '21 at 21:30

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

5 Answers5

Linked