How to add bootstrap 5 modal in Angular

Question

I have included bootstrap 5 in index.html

<link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen">

I tired to use the sample code from Bootstrap documentation, in my angular page, it's not working.

what could be the reason, is there another way to use modal inside angular page?

Answer 1

In 2021 works perfectly,

install bootstrap with npm install --save bootstrap

in angular.json file set route to bootstrap css and js

in component.ts file

import * as bootstrap from 'bootstrap';

  modalName: bootstrap.Modal | undefined
save(){
    this.testModal?.toggle()
  }
  openModal(element){
    this.testModal = new bootstrap.Modal(element,{} ) 
    this.testModal?.show()
  }

in component.html file

<button class="btn btn-primary" (click)="openModal(testModal)">Add dish</button>
    
<div class="modal" tabindex="-1" #testModal id="testModal"> ...</div>

Answer 2

Try installing bootstrap 5 npm install bootstrap@next in angular and use bootstrap 5 Modal, it should work https://www.npmjs.com/package/bootstrap/v/5.0.0-alpha1