bootstrap 5 angular modal code example

Example: bootstrap 5 with angular modal

//Generate an angular project using 
//ng command and then install the bootstrap 5 alpha by 
ng new appname 
npm install — save bootstrap@next


//Now add the `scss/css`
//to your angular.json file 
//to include the bootstrap css classes to your app

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "src/styles.scss"
],

//Import Boostrap in your component
import Bootstrap from 'bootstrap/dist/js/bootstrap';

// Define a variable for bootstrap modal and @ViewChild like below
modalDirect: Bootstrap.Modal;
@ViewChild('demoModal') input;

//Now create a method to open the bootstrap5 modal on click of a button
open(element): void {
  this.modalDirect = new Bootstrap.Modal(element, {});
}

// Example HTML FILE
<div class="home-component container">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary"
          (click)="open(demoModal)"
          data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div #demoModal class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <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">
          ... this is the model content
        </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>
</div>