Open Bootstrap Modal Popup With Dynamic Content Angular 11

We learn to open bootstrap modal popup with dynamic content. In this tutorial, I will tell you an angular modal popup with dynamic content.

When we have to open bootstrap popup in our project, angular modal popup we do it easily in HTML PHP language, but in angular, it becomes very difficult for which popup is not open when we click the button of popup due to which we If we get upset then in this tutorial we will learn how to open a bootstrap popup in Angular. In that easy way, I will tell you in this tutorial how I and you can open the bootstrap popup in any project of Angular. ng bootstrap modal, After that, in it you can fetch dynamic data like name password photo any data, etc. whatever you want from dynamic data also we will see in real, let's learn with me how we 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, so you need to follow below link:

Add Bootstrap 4 to Angular 11

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>

<div class="container text-center my-5">
<h2>Open Bootstrap Modal Popup With Dynamic Content Angular 11</h2>
<button type="button" class="btn btn-primary text-center" (click) = "show()">
Open modal
</button>
<style>
.c{
margin-top: 169px;
}
</style>
<div class="modal c" id="myModal" [style.display]="showModal ? 'block' : 'none'">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{ title }}</h4>
<button type="button" class="close" data-dismiss="modal" (click) = "hide()">×</button>
</div>
<div class="modal-body">
{{ content }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" (click) = "hide()">Close</button>
</div>
</div>
</div>
</div>
</div>

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

  }

}

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

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. Finally, we need to run the below command and run your Angular application:

ng serve

I hope it can help you...

Node Js Angular

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.