Wednesday, July 24, 2024
Angular7Bootstrap 4

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 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:


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

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  showModal : boolean;
  UserId    : string;
  Firstname : string;
  Lastname  : string;
  Email     : string;
    this.showModal = true; // Show-Hide Modal Check
      this.UserId =;
      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
    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">
      <tr class="table-primary">
        <td id="firstname1">John</td>
        <td id="lastname1">Doe</td>
        <td id="email1"></td>
        <td id="1" (click)="onClick($event)" style="cursor: pointer;font-weight: bold;">Show</td>

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

  <!-- 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>
        <!-- Modal body -->
        <div class="modal-body">
         <p>User Id : {{UserId}}</p>
         <p>Firstname : {{Firstname}}</p>
         <p>Lastname : {{Lastname}}</p>
         <p>Email : {{Email}}</p>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal" (click) = "hide()">Close</button>


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


Thank you

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


  • 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.


    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 ?

  • 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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.