Bootstrap Modal doesn't display the right data

Question

Im strugling to solve this issue ... Well, I have a table contains a list of user, each row contains user name and two buttoms for for update and one for delete. The update button display the bootstrap modal which contains the name of user to be updated. My issue when i click the update button it can only display the value of the first row for all other rows.

table of users:

<table class="table table-hover "> 
      <thead> 
            <tr> 
                <th>#</th> 
                <th>Name</th>
                <th>Age</th>
                <th>Action</th> 
            </tr> 
       </thead>
          <tbody class="body">
          <ng-container *ngFor="let u of users"> 
              <tr class="active" 
                app-single-user
                [IdUser] =  "u.idUser"
                [NameUser] = "u.nameUser"
                (deleted)="onSubmit($event)"
              > 
              </tr>
        </ng-container>
      </tbody> 
    </table>

Single-use-component.html that contains the modal for update:

 <td scope="row">
            {{IdUser}}
      </td>
      <td>
            {{NameUser}}
      </td>
      <td>
            <button type="button" class = "btn btn-info" data-toggle="modal" data-target="#myModal"
                        (click)="initForm(NameUser)"><i class="fa fa-pencil-square-o"></i>
            </button>
                        &nbsp;
            <button type = "button" class="btn btn-danger"  (click)="deleteType(IdUser)"> 
                         <i class="fa fa-trash-o"></i> 
            </button>
      </td>


  <!-- The Modal -->
  <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
       <form [formGroup]="myGroup">

          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Modal title</h4>
          </div>   
          <!-- Modal body -->
          <div class="modal-body">
            <div class="form-group" >
                  <label for="nom_tp">Libellé:</label>
                  <input type="text" class="form-control" id="nom_tp"  
                        formControlName="NameUserUpdate" required>
            </div>
          </div>   
          <!-- Modal footer -->
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-info" >Update</button>
          </div>
      </form>
        </div>
      </div>
    </div>

Single-use-component.ts

myGroup: FormGroup;
name: String;

ngOnInit() {
    this.initForm(this.nom);
  }

initForm(nom_tp: any) {
    this.name= nom_tp;
    this.myGroup = this.formBuilder.group({
      NameUserUpdate: [this.name, Validators.required]
    });
  }

How I can solve this issue to let my modal recieve the value of each row by clicking on the update button. I did not yet implement the fonction to save the updates. Thank you in advance.

Answer 1

In your Single-use-component.html use unique id for each modal and for your button data-target.

<button type="button" class = "btn btn-info" data-toggle="modal" [attr.data-target]="'#modal' + IdUser"
                    (click)="initForm(NameUser)"><i class="fa fa-pencil-square-o"></i>

and

<div class="modal fade" [id]="'modal' + IdUser">