CODEWITHSUNDEEP
javascriptangulartypescript
Tymi
Tymi

Reputation: 3

Angular - Get text from button to show different content in modal

I'm currently learning Angular and Typescript, I don't know much yet

I have a table which shows data from an array of objects with ngFor

<tbody *ngFor="let book of tableBooklist">
  <tr>
    <td>{{book.title}}</td>
    <td>
      <button (click)="toggleModal()" class="btn btn-link">{{book.author.nameAut + ' ' + book.author.surnameAut}}</button>
    </td>
    <td>{{book.publicationYear}}</td>
    <td>{{book.publisher}}</td>
    <td>{{book.genre}}</td>
    <td>{{book.numberOfCopies}}</td>
    <td>{{book.firstPublication}}</td>
  </tr>
</tbody>

The button triggers a modal component. I need to read the name of the button I clicked in order to show different content on my modal. For example, I click on the button with the name "Lev Tolstoj" and the modal shows the details from the author (that I have in my array).

I don't know how to get the content from the button, since I print it with ngFor.

Upvotes: 0

Views: 335

Answers (1)

Pathik Patel
Pathik Patel

Reputation: 185

Pass the book object as parameter.

 <td>
  <button (click)="toggleModal(book)" class="btn btn-link">{{book.author.nameAut + ' ' + book.author.surnameAut}}</button>
</td>

You can access the book object and pass it to your modal

public toggleModal(book: Book){
     //code to pass book (book.author) to your modal
}

Upvotes: 2

Related Questions