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:
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()">×</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. Finally, we need to run the below command and run your Angular application:
ng serve
I hope it can help you...
Leave a Reply