Angular7Bootstrap 4

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

Views

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;
  }
}


---app.component.ts---

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

1 Comment

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

Leave a Reply

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

Positive SSL