Bootstrap modal is not shown on angular 8 on click

Question

I am trying to display a modal on a button click in an angular application. I installed bootstrap and wrote the code specified in the bootstrap tutorial. The modal is available on click as its available during inspecting the html of browser but not showing on the browser. However changing the modal elements display property from block to contents displays the modal. Please find the current code below.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                      Launch demo modal
                    </button>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

The modal is being displayed in normal html and css not in angular

dose this is answer of youe question https://stackoverflow.com/questions/35400811/how-to-use-code-to-open-a-modal-in-angular-2/42597422 ? — kushal shah, Jan 04 '20 at 12:13
Its for a hidden button right, in my case when i click the button the modal is rendered to the DOM but not displayed — V5NEXT, Jan 04 '20 at 12:38

kushal shah · Accepted Answer · 2021-03-02T07:16:36.703

17

Try with below code

IN your HTML file

<button type="button" class="btn btn-info btn-lg" (click)="openModal()">click to open</button>
    <div class="modal" tabindex="-1" role="dialog"  [ngStyle]="{'display':display}">
         <div class="modal-dialog" role="document">
               <div class="modal-content">
                     <div class="modal-header">
                           <h4 class="modal-title">Model Title</h4>
                           <button type="button" class="close" aria-label="Close" (click)="onCloseHandled()"><span aria-hidden="true">&times;</span></button>
                         </div>
                <div class="modal-body">
                           <p>Model body text</p>
                         </div>
                     <div class="modal-footer">
                           <button type="button" class="btn btn-default" (click)="onCloseHandled()" >Close</button>
                         </div>
            </div>
             </div>
 </div>

In your TS(component) file

create 2 method

 import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styles:[
    `.modal{background: rgba(0,0,0, .5);`
  ]
})
export class AppComponent implements OnInit {
display = "none";
  ngOnInit() {
   }
openModal() {
    this.display = "block";
  }
  onCloseHandled() {
    this.display = "none";
  }
}

Hope this will help you

let me know if you have any query

thanks

edited Mar 02 '21 at 07:16

answered Jan 04 '20 at 13:46

kushal shah

823
6
9

can the back drop get blurred on the modal load? – V5NEXT Jan 05 '20 at 05:17
yes you can just put this in style `.modal{background: rgba(0,0,0, .5);` – kushal shah Jan 05 '20 at 05:46
hii please look above answer I have made change replace it with your html and ts and let me know if it not work thanks for updating.. – kushal shah Jan 05 '20 at 06:09
Yes i already did update with the code bro, but its not working – V5NEXT Jan 05 '20 at 06:30
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/205371/discussion-between-v5nxt-and-kushal-shah). – V5NEXT Jan 05 '20 at 06:32
thank you so much! this answer helped me alot. – Davis Jahn Oct 11 '21 at 13:47

score 0 · Answer 2 · answered Mar 04 '22 at 06:45

0

Add the code below in your index.html file -> within the body section.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>

answered Mar 04 '22 at 06:45

amos moronya

1
2

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 04 '22 at 07:28

Bootstrap modal is not shown on angular 8 on click

2 Answers2