CODEWITHSUNDEEP
angulardynamic
Martin
Martin

Reputation: 557

Passing Dynamic data on an Angular Application

Am working on a CRUD based application using Angular 8 which works fine. On one component am showing all the dynamic data from the backend. I need when the edit button is clicked,, I fetch the particular id that was picked and parse to the backend.

The problem is am having an issue parsing the dynamic id in curly braces in the button.

Component.html markup file

 <table class="table table-dark table-hover" #dataTable>
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Age (Years)</th>
        <th>Gender</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let user of userData">
       <td>
            {{ user.name}}
       </td>
       <td>
            {{ user.age}}
       </td>
       <td>
            {{ user.gender}}
       </td>
       <td>
          <button class="btn btn-primary" (click)="edit({{ user.id }})">Edit</button>
          <button class="btn btn-danger" (click)="delete({{ user.id }})">Delete</button>
       </td>
      </tr>
    </tbody>
  </table>

Upvotes: 0

Views: 71

Answers (1)

Davide Lorenzo MARINO
Davide Lorenzo MARINO

Reputation: 26926

Simply remove the curly braces:

<button class="btn btn-primary" (click)="edit(user.id)">Edit</button>
<button class="btn btn-danger" (click)="delete(user.id)">Delete</button>

If you are using an event (using round brackets) or data binding (square brackets) you can't use the curly braces on the right part of the assignement.

You can use the curly braces in a normal text or on the right part of an assignement that doesn't use round or square brackets (or both).

Upvotes: 1

Related Questions