How to open a bootstrap modal with clicking button on Angular

Question

I have a bootstrap Modal along with the button like below.

      <!-- Button trigger modal -->
       <button type="button" class="btn btn-primary" data-toggle="modal" data- 
         target="#staticBackdrop">
         Launch static backdrop modal
       </button>

     <!-- Modal -->
     <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" 
     tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
     <div class="modal-dialog">
     <div class="modal-content">
     <div class="modal-header">
    <h5 class="modal-title" id="staticBackdropLabel">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">Understood</button>
  </div>
</div>
</div>
</div>

When I click on the button the modal will open, but I want as soon as the screen loads I want to display the Modal how can I do that.

score 0 · Answer 1 · answered Aug 25 '20 at 12:05

0

Did you add the bootstrap in your angular.json file ? Like this

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
        ]

answered Aug 25 '20 at 12:05

greenCode

109
2
11

Yes...I have added – kumkum kumkum Aug 25 '20 at 12:26
Do you still have problem – greenCode Aug 25 '20 at 12:27
If you explain me with an example It would be better for me – kumkum kumkum Aug 25 '20 at 12:33
``
wrap your modal
`` in your ts file declare a variable ``isLoad = false `` then in your **ngOnit function** ``ngOnInit(): void { isLoad = True; }`` – greenCode Aug 25 '20 at 12:42

score 0 · Answer 2 · answered Aug 25 '20 at 12:10

I'd suggest you to use Angular compatible bootstrap i.e. ng-bootstrap, as original bootstrap is operating on DOM directly so if you'd like to try to interfere into bootstrap DOM operations in Angular template, it could be a little bit hard.

Look what happens inside DOM when you're clicking "button trigger modal", there are two classes which are appearing there. One of them is "modal-open" injected into body, and another one is "show" injected into your modal. You would need to add some click event catcher inside Angular .ts file, which will be responsible for setting flag open to true or false. Then you need to place this flag into optional class inside your modal template like this:

<div class="modal fade" id="staticBackdrop" [class.show]="show" ...

But you should also remember that you need to set this flag to false on close modal action. Then all you need to set this flag as true as default and set it to false inside ngOnInit.

How to open a bootstrap modal with clicking button on Angular

2 Answers2