[SOLVED] Angular & Bootstrap Modal

I have a data table, with a button that opens a Modal (Bootstrap Modal) for each table row.
I would like that when I open a one row modal, I get the data from that row.
it works with “console.log (this.array[index])”
. And also when I open the Modal, it always shows me the data of the first row of the table.
I think I’m missing an index parameter in the modal.
Thank you in advance for your help.
My TS File :

export class ListeDevisComponent implements OnInit {
  listeDevis = [];

  constructor(private listeDevisService: ListeDevisService) {}

  ngOnInit() {
    this.listeDevisService.getListeDevis().subscribe(
      (data: any) => {
        this.listeDevis = data;
      },
      (error) => {
        console.error(error);
      },
      () => {
        console.log("Liste Devis Success");
      }
    );
  }

  voirIndexDevis(index) {
    console.log(this.listeDevis[index]);
  }
}

My HTML File :

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">ID Devis</th>
      <th scope="col">Date Devis</th>
      <th scope="col">Actions</th>
      <th scope="col">Nom Complet</th>
      <th scope="col">Contact</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let liste of listeDevis; let i = index">
      <td>{{ liste.idDevis }}</td>
      <td>{{ liste.dateDevis }}</td>
      <td>
        <button
          class="btn btn-primary"
          data-toggle="modal"
          data-target="#exampleModal"
          (click)="voirIndexDevis(i)"
        >
          Test Modal Actions
        </button>
      </td>
      <td>{{ liste.nom }} {{ liste.prenom }}</td>
      <td>{{ liste.email }}</td>
    </tr>
  </tbody>
</table>

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Liste Devis</h5>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row" *ngFor="let liste of listeDevis; let i = index">
          <div class="col-lg-3 col-12 border">
            <h5>Type Installation :</h5>
            {{ liste.typeInstallation }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Quantité :</h5>
            {{ liste.qte }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Charge Nominale :</h5>
            {{ liste.charge }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Nombres Arrêts :</h5>
            {{ liste.arrets }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Type Gaine :</h5>
            {{ liste.typeGaine }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Local Machinerie :</h5>
            {{ liste.localMachinerie }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Mode Entrainement :</h5>
            {{ liste.modeEntrainement }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Modèle :</h5>
            {{ liste.modeles }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Couleur :</h5>
            {{ liste.couleur }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Dimension Cabine :</h5>
            {{ liste.dimensionCabine }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Plafond :</h5>
            {{ liste.plafond }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Mirroir :</h5>
            {{ liste.mirroir }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Porte Cabine :</h5>
            {{ liste.porteCabine }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Accessoires :</h5>
            {{ liste.accessoires }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Type Porte Paliers :</h5>
            {{ liste.typePortePaliers }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Ouverture :</h5>
            {{ liste.ouverture }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Passage Libre :</h5>
            {{ liste.passageLibre }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Finition :</h5>
            {{ liste.finition }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Votre Nom :</h5>
            {{ liste.nom }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Votre Prenom :</h5>
            {{ liste.prenom }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Destinataire :</h5>
            {{ liste.destinataire }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Votre E-mail :</h5>
            {{ liste.email }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Votre Numéro Tel :</h5>
            {{ liste.telephone }}
          </div>
          <div class="col-lg-3 col-12 border">
            <h5>Votre Disponibilité :</h5>
            {{ liste.disponibilite }}
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          Fermer
        </button>
      </div>
    </div>
  </div>
</div>

Found Solution here : https://stackoverflow.com/questions/63434809/angular-bootstrap-modal