Bootstrap modal not working in Angular application

Question

I am trying to use a Bootstrap modal in an Angular application using classes in HTML, but it not working - its not showing as a modal

<div class="modal text-center" *ngIf="showmodal" tabindex="-1" id="withScrollExampleModal">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title fw-normal">Basic dialogue title</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          <i class="fa-light fa-circle-xmark"></i>
        </button>
      </div>
      <div class="modal-body f-14">
        <p>Lorem ipsum dolor sit amet consectetur. Enim libero commodo nibh vitae sed laoreet magna dui pharetra.
        </p>
      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Action 1</button>
        <button type="button" class="btn btn-outline-primary rounded-pill">Action 2</button>
      </div>
    </div>
  </div>
</div>

Answer 1

Bootstrap has build in functions to open and close modals. For example there is a button that should open a modal, in that button there needs to be a data toggle like data-toggle="modal" and the target id of the modal like data-target="#Id of the modal" Further the modal itself hass to have a class called "modal" and a id. This id has to be the same as the data-target. Here is an example of a modal.

<!-- Button trigger modal -->
<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>

For this to work make sure to import the following items in the head

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    

For more information on modals in bootstrap go to the following link https://getbootstrap.com/docs/4.0/components/modal/

Answer 2

I don't think it's a good idea to use bootstrap with just css. If you do absolutely want to do that, you can try this

<link href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal text-center show" tabindex="-1" id="withScrollExampleModal" style="display: block">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title fw-normal">Basic dialogue title</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          <i class="fa-light fa-circle-xmark"></i>
        </button>
      </div>
      <div class="modal-body f-14">
        <p>Lorem ipsum dolor sit amet consectetur. Enim libero commodo nibh vitae sed laoreet magna dui pharetra.
        </p>
      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Action 1</button>
        <button type="button" class="btn btn-outline-primary rounded-pill">Action 2</button>
      </div>
    </div>
  </div>
</div>

You need to add the show css class on the modal and also set display: block on that div. But without the js, you won't see the transitions, the backdrop or dismiss the model.

Bootstrap suggests using https://ng-bootstrap.github.io/ if you're using it in angular