title: In a HTML table using Angular, and a button to open a modal displays on each row, it always displays the first of the element list
body: <p>I present a table with customers, when clicking on the button &quot;Details&quot;, <br>
  supposed to open a modal that displays the <strong>selected</strong> customer details, but the modal always displays the <strong>FIRST</strong> CUSTOMER of the list</p>
  <pre><code>  &lt;table class=&quot;table table-hover table-sm&quot;&gt;
        &lt;thead class=&quot;thead-dark&quot;&gt;
          &lt;tr&gt;
            &lt;th&gt;Id&lt;/th&gt;
            &lt;th&gt;Nom&lt;/th&gt;
            &lt;th&gt;Prénom&lt;/th&gt;
            &lt;th&gt;Email&lt;/th&gt;
            &lt;th&gt;Actions&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
  
  
            &lt;tr *ngFor=&quot;let customer of customers&quot;&gt;
  
              &lt;td&gt;{{customer.id}}&lt;/td&gt;
              &lt;td&gt;{{customer.lastname}}&lt;/td&gt;
              &lt;td&gt;{{customer.firstname}}&lt;/td&gt;
  
              &lt;td&gt;
  
                &lt;!-- VIEW button --&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot; 
                  data-toggle=&quot;modal&quot; data-target=&quot;#view-modal&quot;&gt;Détails&lt;/button&gt;
  
                &lt;!-- displays the details modal --&gt;
                &lt;app-details-customer [customer] = customer&gt;&lt;/app-details-customer&gt;
  
            &lt;/tr&gt;
  
  
        &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  <h2>Here is the modal HTML code of the content of the modal</h2>
  
  <pre><code>&lt;div class=&quot;modal fade&quot; id=&quot;view-modal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
              &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Détails d'un client&lt;/h5&gt;
              &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
        
                &lt;!-- First name --&gt;   
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;firstname&quot;&gt;Id:&lt;/label&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;&quot; 
                            id=&quot;firstname&quot; [(ngModel)]=&quot;customer.id&quot; name=&quot;id&quot; readonly&gt;
                &lt;/div&gt;
      
                &lt;!-- First name --&gt;   
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;firstname&quot;&gt;First Name:&lt;/label&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Enter Firstname&quot; 
                            id=&quot;firstname&quot; [(ngModel)]=&quot;customer.firstname&quot; name=&quot;firstname&quot;&gt;
                &lt;/div&gt;
                &lt;!-- Last name --&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                    &lt;label for=&quot;lastname&quot;&gt;Last Name:&lt;/label&gt;
                    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Enter Lastname&quot; 
                              id=&quot;lastname&quot; [(ngModel)]=&quot;customer.lastname&quot; name=&quot;lastname&quot;&gt;
                &lt;/div&gt;  
            
                &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Fermer&lt;/button&gt;
        
            &lt;/div&gt;
        
            &lt;div class=&quot;modal-footer&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
                
      &lt;/div&gt;
  </code></pre>
  <h2>and here is the typescript code for the details modal</h2>
  <pre><code>import { Component, Injectable, Input, OnInit } from '@angular/core';
  import { Customer } from '../customer';
  
  @Component({
    selector: 'app-details-customer',
    templateUrl: './details-customer.component.html',
    styleUrls: ['./details-customer.component.css']
  })
  
  // @Injectable()
  export class DetailsCustomerComponent implements OnInit {
    
    @Input() customer: Customer;
  
    constructor() { }
  
    ngOnInit(): void {
    }
  
  }
  </code></pre>
  <p><strong>Could you help me to solve this issue ?</strong>
  <strong>Many thanks in advance</strong></p>