Angular & Bootstrap Modal

Question

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 :

    
  
    
      ID Devis
      Date Devis
      Actions
      Nom Complet
      Contact
    
  
  
    
      {{ liste.idDevis }}
      {{ liste.dateDevis }}
      
        
      
      {{ liste.nom }} {{ liste.prenom }}
      {{ liste.email }}
    
  




  
    
      
        Liste Devis
        
      
      
        
          
            Type Installation :
            {{ liste.typeInstallation }}
          
          
            Quantité :
            {{ liste.qte }}
          
          
            Charge Nominale :
            {{ liste.charge }}
          
          
            Nombres Arrêts :
            {{ liste.arrets }}
          
          
            Type Gaine :
            {{ liste.typeGaine }}
          
          
            Local Machinerie :
            {{ liste.localMachinerie }}
          
          
            Mode Entrainement :
            {{ liste.modeEntrainement }}
          
          
            Modèle :
            {{ liste.modeles }}
          
          
            Couleur :
            {{ liste.couleur }}
          
          
            Dimension Cabine :
            {{ liste.dimensionCabine }}
          
          
            Plafond :
            {{ liste.plafond }}
          
          
            Mirroir :
            {{ liste.mirroir }}
          
          
            Porte Cabine :
            {{ liste.porteCabine }}
          
          
            Accessoires :
            {{ liste.accessoires }}
          
          
            Type Porte Paliers :
            {{ liste.typePortePaliers }}
          
          
            Ouverture :
            {{ liste.ouverture }}
          
          
            Passage Libre :
            {{ liste.passageLibre }}
          
          
            Finition :
            {{ liste.finition }}
          
          
            Votre Nom :
            {{ liste.nom }}
          
          
            Votre Prenom :
            {{ liste.prenom }}
          
          
            Destinataire :
            {{ liste.destinataire }}
          
          
            Votre E-mail :
            {{ liste.email }}
          
          
            Votre Numéro Tel :
            {{ liste.telephone }}
          
          
            Votre Disponibilité :
            {{ liste.disponibilite }}

Jordan Stubblefield · Accepted Answer

To get the row data, pass liste instead of i:

(click)="voirIndexDevis(liste)"

Then, set the current list item in the component file:

export class ListeDevisComponent implements OnInit {
  listeDevis = [];
  currentListe;

  constructor(private listeDevisService: ListeDevisService) {}

  // ngOnInit removed for brevity

  voirIndexDevis(liste) {
    this.currentListe = liste;
  }
}

Then adjust the modal, removing the *ngFor and adding the safe navigation operator to each instance of currentListe.prop:



  
    
      
        Liste Devis
        
      
      
        
          
            Type Installation :
            {{ currentListe?.typeInstallation }}
          
          
            Quantité :
            {{ currentListe?.qte }}
          
          
            Charge Nominale :
            {{ currentListe?.charge }}
          
          
            Nombres Arrêts :
            {{ currentListe?.arrets }}
          
          
            Type Gaine :
            {{ currentListe?.typeGaine }}
          
          
            Local Machinerie :
            {{ currentListe?.localMachinerie }}
          
          
            Mode Entrainement :
            {{ currentListe?.modeEntrainement }}
          
          
            Modèle :
            {{ currentListe?.modeles }}
          
          
            Couleur :
            {{ currentListe?.couleur }}
          
          
            Dimension Cabine :
            {{ currentListe?.dimensionCabine }}
          
          
            Plafond :
            {{ currentListe?.plafond }}
          
          
            Mirroir :
            {{ currentListe?.mirroir }}
          
          
            Porte Cabine :
            {{ currentListe?.porteCabine }}
          
          
            Accessoires :
            {{ currentListe?.accessoires }}
          
          
            Type Porte Paliers :
            {{ currentListe?.typePortePaliers }}
          
          
            Ouverture :
            {{ currentListe?.ouverture }}
          
          
            Passage Libre :
            {{ currentListe?.passageLibre }}
          
          
            Finition :
            {{ currentListe?.finition }}
          
          
            Votre Nom :
            {{ currentListe?.nom }}
          
          
            Votre Prenom :
            {{ currentListe?.prenom }}
          
          
            Destinataire :
            {{ currentListe?.destinataire }}
          
          
            Votre E-mail :
            {{ currentListe?.email }}
          
          
            Votre Numéro Tel :
            {{ currentListe?.telephone }}
          
          
            Votre Disponibilité :
            {{ currentListe?.disponibilite }}

If the safe navigation operator (currentListe?.prop) does not work, you could also use an ngIf:

Alternative Solution

Because we all love options, you can also control the modal manually. First, remove the logic that connects the row buttons to the modal:

Then add logic to the component file to show/hide the modal:

export class ListeDevisComponent implements OnInit {
  listeDevis = [];
  currentListe;
  showModal: boolean = false;

  constructor(private listeDevisService: ListeDevisService) {}

  // ngOnInit removed for brevity

  voirIndexDevis(liste) {
    this.currentListe = liste;
    this.showModal = true;
  }

  hideModal() {
    this.showModal = false;
  }
}

Then update the modal show/hide logic by adding an *ngIf to the outer div and updating the close button in the upper-right corner and the footer button to call hideModal() when clicked:


  
    
      
        Liste Devis

Angular & Bootstrap Modal

Answers (2)

Alternative Solution

Related Questions

Angular &amp; Bootstrap Modal

Answers (2)

Alternative Solution

Related Questions

Angular & Bootstrap Modal