Thursday, May 30, 2024

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 14, Angular 15, Angular 16, Angular 17, 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.