Angular 7 open Bootstrap 4 modal popup with dynamic data on click on Bootstrap 4 table row

·

,
How to make business template with Bootstrap 4 and Angular 9?

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 7 open Bootstrap 4 modal popup with dynamic data on click on Bootstrap 4 table row.

If you are new in Angular 7 then you can check my old Angular 7 posts.

Now I will come to the main point and here is the code snippet for Angular 7 open Bootstrap 4 modal popup with dynamic data on click on Bootstrap 4 table row:


1. Very first, you need to add Bootstrap into your Angular Application so please follow the below link:

https://therichpost.com/add-bootstrap-to-angular-7

 

2. Now add below code into your app.component.ts file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  showModal : boolean;
  UserId    : string;
  Firstname : string;
  Lastname  : string;
  Email     : string;
  
  onClick(event)
  {
    this.showModal = true; // Show-Hide Modal Check
      this.UserId = event.target.id;
      this.Firstname = document.getElementById("firstname"+this.UserId).innerHTML;
      this.Lastname = document.getElementById("lastname"+this.UserId).innerHTML;
      this.Email = document.getElementById("email"+this.UserId).innerHTML;

  }
  //Bootstrap Modal Close event
  hide()
  {
    this.showModal = false;
  }
}



  
  

3. Now add below code into your app.component.html file:

<div class="container">
  <h2>Basic Table</h2>
  <p>Angular 7 open bootstrap 4 modal popup with dynamic data on click on bootstrap table row</p>            
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-primary">
        <td id="firstname1">John</td>
        <td id="lastname1">Doe</td>
        <td id="email1">john@example.com</td>
        <td id="1" (click)="onClick($event)" style="cursor: pointer;font-weight: bold;">Show</td>

      </tr>
      <tr class="table-success">
        <td id="firstname2">Mary</td>
        <td id="lastname2">Moe</td>
        <td id="email2">mary@example.com</td>
        <td id="2" (click)="onClick($event)" style="cursor: pointer;font-weight: bold;">Show</td>
      </tr>
      <tr class="table-danger">
        <td id="firstname3">July</td>
        <td id="lastname3">Dooley</td>
        <td id="email3">july@example.com</td>
        <td id="3" (click)="onClick($event)" style="cursor: pointer;font-weight: bold;">Show</td>
      </tr>
    </tbody>
  </table>

  <!-- The Modal -->
  <div class="modal" id="myModal" [style.display]="showModal ? 'block' : 'none'">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">User Details:</h4>
          <button type="button" class="close" data-dismiss="modal" (click) = "hide()">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
         <p>User Id : {{UserId}}</p>
         <p>Firstname : {{Firstname}}</p>
         <p>Lastname : {{Lastname}}</p>
         <p>Email : {{Email}}</p>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal" (click) = "hide()">Close</button>
        </div>
        
      </div>
    </div>
  </div>
</div>

 

If you have any query related to this post, then do comment below or ask question.

Harjas,

Thank you

Comments

6 responses to “Angular 7 open Bootstrap 4 modal popup with dynamic data on click on Bootstrap 4 table row”

  1. yusuf Avatar
    yusuf

    Hi Ajay

    Thanks for the useful post. I tried your method it worked for me but it is not effective as shown in bootstrap documentation.

    $(‘#myModal’).modal(‘show’)

    Above code does not work in angular 7. Jquery works for selecting elements but modal is undefined

    How could I use modal function of that jquery element ?

  2. Matt Avatar
    Matt

    Worked great for me, I did not want to install unneeded libraries to my project for just a simple modal.

  3. Ajay Malhotra Avatar
    Ajay Malhotra

    Did you use same code?

  4. Ajay Malhotra Avatar

    Thank you Matt 🙂

  5. Ravi Avatar
    Ravi

    I have table or orders first raw is of view order if I click first order I want to show only first item of the array, for second value of the second item and so on, but currently, if I click to any of the view order it showing all of the array items.
    please help.

  6. Ajay Malhotra Avatar

    Hi, this is working bro. In modal popup only one item is showing or you have any other requirements?