CODEWITHSUNDEEP
htmlcssangularbootstrap-5
kiran
kiran

Reputation: 693

How to add bootstrap 5 modal in Angular

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?

Upvotes: 4

Views: 18333

Answers (5)

Luis Alejandro Quiroga G&#243;mez
Luis Alejandro Quiroga G&#243;mez

Reputation: 21

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.

Upvotes: 2

bruno
bruno

Reputation: 31

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

Upvotes: 2

Artur O
Artur O

Reputation: 184

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>

Upvotes: 6

Gajanan
Gajanan

Reputation: 464

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"
           ]

Upvotes: 1

Andrew Lubezki
Andrew Lubezki

Reputation: 112

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

Upvotes: 2

Related Questions