Categories

Friday, March 29, 2024
#919814419350 therichposts@gmail.com
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 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

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. 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.

6 Comments

Leave a Reply

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