How can I use bootstrap 4 in Angular 9?

Question

I'm new to angular. I'm implementing modal but it's not showing ?

I tried using bootstrap but it's not working properly

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                Launch demo modal
              </button>

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

what you want to achieve, what have you tried please tell us more — silentsudo, May 17 '21 at 05:00
i try First add bootstrap Library and Add this code but i not underStand How to show modal on this button click @silentsudo — Paresh Shiyal, May 17 '21 at 05:02

score 2 · Answer 1 · answered May 17 '21 at 05:25

I think you have not added bootstrap properly in your project. The HTML code you have shared looks ok to me.

If you can share some more detail/ code then I can help with what's going wrong.

Though I am sharing the ways to add bootstrap to your project, please try and let me know if that works.

(Method 1) — Adding Bootstrap to Angular Using angular.json

(Method 2) — Adding Bootstrap to Angular Using index.html

(Method 3) — Adding Bootstrap to Angular Using ng-bootstrap and ngx-bootstrap

Method-1:

run the following command-

npm install bootstrap --save
npm install jquery --save

angular.json

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

Method-2:

You can also include Bootstrap files from node_modules/bootstrap using the index.html file. Run commands from method 1.

Then Index.html

<!doctype html><html lang="en">
<head>  
<meta charset="utf-8">  
<title>Angular Bootstrap 4 Examples</title>  <base href="/">  
<meta name="viewport" content="width=device-width, initial-scale=1">  
<link rel="icon" type="image/x-icon" href="favicon.ico">  
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>  
<app-root></app-root>  
<script src="../node_modules/jquery/dist/jquery.js"></script>  <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>    
</body>
</html>

Method-3:

LINK: https://ng-bootstrap.github.io/#/home

ng add @ng-bootstrap/ng-bootstrap

How can I use bootstrap 4 in Angular 9?

1 Answers1