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

AngularCollapse

Angular Problem Overview

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.

Angular Solutions

Solution 1 - Angular

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

  }

Solution 2 - Angular

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>

Solution 3 - Angular

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

Solution 4 - Angular

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>

Solution 5 - Angular

<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>
Categories
Recommended Angular Solutions

Previous Solution:

How to extract all the emojis from text?

PythonPython 3.xEmoji

Next Solution:

Dimension of shape in conv1D

PythonTensorflowKerasDeep LearningConv Neural-Network

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionEr Vipin SharmaView Question on Stackoverflow
Solution 1 - AngularAravindView Answer on Stackoverflow
Solution 2 - AngularAmitView Answer on Stackoverflow
Solution 3 - AngularAchraf FaroukyView Answer on Stackoverflow
Solution 4 - AngularBhaskararao GummidiView Answer on Stackoverflow
Solution 5 - AngularOSCAR DARIO RENDON ZULUAGAView Answer on Stackoverflow