CODEWITHSUNDEEP
htmlangular
takampika
takampika

Reputation: 51

how to display a data in a modal using angular 2

I have a table with button. What I need is when I click on the button in the table , a modal diplay with its value. My problem is how to pass the table's value to the modal. Can any one help me, here is the code

      <div style="margin-top: 50px" class="col-md-12">
        <div class="card">
          <div class="card-block">
            <div class="horizontal-scroll">
              <table class="table table-condensed">
                <thead>
                  <tr>

                    <th>Titre</th>
                    <th>Description</th>
                    <th>Durée (jours)</th>
                    <th>Coût (TalanCoin)</th>
                    <th>Action</th>

                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let item of formations">

                    <td>{{ item[1] }}</td>
                    <td style="margin-left: 4cm;">
                      <button type="button" class="btn btn-info btn-icon" (click)="smModal.show()"><i class="ion-information"></i></button> 


                      </td>

                    <td>{{ item[3] }}</td>
                    <td>{{ item[4] }}</td>
                    <td >

                      <button class="btn btn-success" (click)="clicked(item[4],lgModal)">Participer</button>

                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

    <!-- Small modal -->
     <div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" 
    role="dialog" aria-labelledby="mySmallModalLabel" aria-
  hidden="true">

     <div class="modal-dialog modal-sm">
       <div class="modal-content">
         <div class="modal-header">
           <button class="close" aria-label="Close" 
            (click)="smModal.hide()">
              <span aria-hidden="true">&times;</span>
          </button>
              <h4 class="modal-title">Description</h4>
          </div>
          <div class="modal-body"  style="color: black;">
         <!--here I want to display the value selected from the table-->
         </div>
       <div class="modal-footer">
       <button class="btn btn-primary confirm-btn" 
       (click)="smModal.hide()">Save changes</button>
         </div>
</div>

Upvotes: 0

Views: 1357

Answers (1)

Bart
Bart

Reputation: 799

You could make a function in your component which opens the modal like this:

...
export class AppComponent {    
  @ViewChild('smModal') smModal;
  currentItem;
  ...
  openModal(item: any) {
    this.currentItem = item;
    this.smModal.show();
  }
}

Then instead of smModal.show() you can call openModal(item). In the modal, you can then access {{ currentItem }} the same way you access item in the table.

Upvotes: 1

Related Questions