Angular6Bootstrap

Angular – Open Bootstrap Modal Popup with Dynamic Content

Angular - Open Bootstrap Modal Popup with Dynamic Content

Angular_bootstrap_modal
110Views

Hello to all, welcome to therichpost.com. 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
  </button>

  <!-- 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>
        </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>

 

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

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

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

//Bootstrap Modal Open event
show()
{
  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
hide()
{
  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,

Jatt,

TheRichPost

 

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

Positive SSL