Friday, April 19, 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.


Leave a Reply

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