How to add bootstrap 5 modal in Angular

user_2993390 0
Viewed 4823

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?

bootstrap-5 angular css html
5 Answers

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>
user_101884300
user_164404660

run below commands into our project terminal to install bootstrap 5 modules into our angular application:

npm install bootstrap@next

add below code into src/app/app.component.html file to get final out on the web browser:

  <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" 
  data-bs-target="#exampleModal">
  Launch demo modal
</button>
<!-- Modal -->
<div 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 text-danger" id="exampleModalLabel">Hey 
      Bootstrap 5!!</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" 
       aria-label="Close"></button>
      </div>
      <div class="modal-body text-danger">
       Therichpost.com
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning" data-bs- 
       dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

need to add the below code into angular.json file:

    "styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": [
              ...
               "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
user_120657560

I tried many other answers and the answer from @Gajanan was the one that worked for me. I answer this for the me of the future or other people that might encounter this problem, it is actually very simple and it might be explained in the Boostrap documentation or the Angular documentation and this is a tl;dr.

This is the process I used:

  1. I started a new Angular project from the cli, using scss and TypeScript.
  2. Then downloaded Bootstrap using NPM.
  3. Then added the Bootstrap .scss file to the default styles scss.

After this my monke brain thought everything was right, because the Bootstrap styles loaded fine. But then I tried to use the modal, and it didn't work so I used the @Gajanan response and it worked.

But to that I have to add. Be careful where you add the script, I added the script elsewhere and I threw like 15 minutes to the garbage.

{
  ...
  "projects": {
    ...
    "myProject": {
      ...
      "architect": {
        ...
        "build": {
          ...
          "options": {
            ...
            "scripts": ["here "],
          },
          ...
          "test": {
            ...
            "options": {
              ...
              "scripts": ["NOT here"],
            }
          }
        }
      }
    }
  }
}

I know... I know... pretty obvious, but I had that problem, so this is a way of punishing myself for committing that error.

user_139587960 
const a = new (window as any).bootstrap.Modal(element);
 //a.toglle();
 //a.show();
 //a.hide();
 //a.dispose();
user_174595080
Related