Angular – Open Bootstrap Modal Popup with Dynamic Content

Hello to all, welcome to therichpost.com. In this post, I will do, Angular – Open Bootstrap Modal Popup with Dynamic Content.

In this post, I am  Opening Bootstrap Modal Popup with Dynamic Content In Angular 6 click event and I am very happy to share this post.

I have shared to many posts related to related to Angular and Bootstrap on my blog.

Here is the working code you need to follow:

1. Very, we need to install bootstrap into our Angular application, so for this, you need to follow below link:

Add Bootstrap 4 to Angular 6

2.  After it, you need to add below code into your app.component.html file:

<div class="container">
  <h2>Modal Example</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" (click) = "show()">
    Open modal
  </button>

  <!-- 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">{{ title }}</h4>
          <button type="button" class="close" data-dismiss="modal" (click) = "hide()">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          {{ content }}
        </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>

3. And Finally, you need to 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;
content: string;
title: string;

//Bootstrap Modal Open event
show()
{
  this.showModal = true; // Show-Hide Modal Check
  this.content = "This is content!!"; // Dynamic Data
  this.title = "This is title!!";    // Dynamic Data
}

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

}

4. Finally, need to run below command and run you Angular application:

ng serve

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

Thank you,

Jatt,

TheRichPost