Monday, November 28, 2022

Angular – Open Bootstrap Modal Popup with Dynamic Content

Angular - Open Bootstrap Modal Popup with Dynamic Content


Hello to all, welcome to 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

  <!-- 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>
        <!-- Modal body -->
        <div class="modal-body">
          {{ content }}
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal" (click) = "hide()">Close</button>


3. And Finally, you need to add below code into your app.component.ts file:

import {Component, OnInit} from '@angular/core';
selector: 'app-root',
templateUrl: './app.component.html',styleUrls: ['./app.component.css'],

export class AppComponent   {
showModal: boolean;
content: string;
title: string;

//Bootstrap Modal Open event
  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
  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,




the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Angular 15, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


  • Hello,
    I think that you left to indicate how to call this component that have created from other component.
    For example If i have an employee list component and i want to call this modal to ask to the user if are they sure that want to delete a empleyee. how could i do it?

Leave a Reply

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