We are learning to turn on bootstrap mode mode with dynamic content. In this tutorial, I will tell you an angular modal popup with flexible content.

If we have to open a bootstrap popup in our project, we do an easy popup modular with HTML PHP language, but with angular, it becomes very difficult which popup does not open when we click the popup button so you get frustrated badly in this tutorial we will learn how to open a bootstrap popup with Angular. In that simple way, I will tell you in this tutorial how you and I can open a bootstrap popup on any Angular project. ng bootstrap modal, After that, in it you can download dynamic data like password image of any data, etc. whatever you want in the dynamic data and we will see in reality, let's learn with me how to open the bootstrap popup.


We use opening bootstrap modal popup with dynamic content In Angular 11 click event, and I am very happy to share this post.


Step 1. 

We need to install bootstrap into our angular application


Step 2. 

In this step, you need to add the below code into your app.component.html file:

<div class="container text-center my-5">
   <h2>Open Bootstrap Modal Popup With Dynamic Content Angular 11</h2>
   <!-- Button to Open the Modal -->
   <button type="button" class="btn btn-primary text-center" (click) = "show()">
     Open modal
   </button>
 <style>
    .c{
      margin-top: 169px;
    }
 </style>
   <!-- The Modal -->
   <div class="modal c" 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>


Step 3. 

In this step, you need to add the below code into your app.component.ts file

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  showModal: boolean = false;
  content: any;
  title: any;


  //Bootstrap Modal Open event
  show() {
    this.showModal = true; // Show-Hide Modal Check
    this.content = "Welcome to phpcodingstuff.com we learn Open Bootstrap Modal Popup With Dynamic Content  "; // Dynamic Data
    this.title = "This tutorial phpcodingstuff.com";    // Dynamic Data
  }
  //Bootstrap Modal Close event
  hide() {
    this.showModal = false;

  }

}


Step 4. 

we need to run the below command and run your Angular application:

ng serve

Thanks..