dropdown does not open with Angular

Question

I'm learning Angular and I have a problem with Bootstrap and the dropdown.

The Bootstrap class loads well, but the dropdown does not work, that's what I did for my new project Angular:

npm install bootstrap jquery popper --save

And when I do a npm audit here is the result

https://codepen.io/Anduril53/pen/LoPgyz?editors=1010

styles in angular.json

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

And you also added jQuery, bootstrap and popper js to the angular.json file..! — Rohit Sharma
– Rohit Sharma, Commented May 4, 2019 at 10:49
no, not in angular.json Here is my file: codepen.io/Anduril53/pen/MdgzWm?editors=1010 Where should I add it? — Eolynas
– Eolynas, Commented May 4, 2019 at 11:32

Chunbin Li · Accepted Answer · 2019-05-05 01:10:13Z

0

Try it

https://github.com/lichunbin814/angular_bootstarp_dropdown

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

edited May 5, 2019 at 1:10

answered May 4, 2019 at 13:43

Chunbin Li

2,2542 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Eolynas Over a year ago

I try but here is the return when I do ng serve and npm install popper --save prntscr.com/nkbsl5

Chunbin Li Over a year ago

This may help you (import-bootstrap-in-angular-6-angular-json-error-enoent-no-such-file-or-direct)

Eolynas Over a year ago

I find the answer. I install popper and not popper.js, so the problem is solved. By cons I have some dependency error, how to solve them easily?

Chunbin Li Over a year ago

I change the order of importing js file (popper.js have to before bootstrap's js)

Eolynas Over a year ago

The message were a problem with a dependence of bootstrap, but is now solved

Maher Farhat · Accepted Answer · 2019-05-04 11:33:48Z

-1

why are using bootstrap .. you can use Angular material it's an awesome framework for angular it has a many features and its easy to work with it . stpes: 1- install the pack npm install --save @angular/material @angular/cdk @angular/animations

2- integrate angular material to your project ng add @angular/material

3- restart the server (ng serve)

4- now you can use any component of angular material. this is the link https://material.angular.io/components/categories

5- for example if you want a dropdown you need to add the api (a module) of the select component in the app module after that you can use it in the all app .

to use the select component : 1- add the api in the app module import {MatSelectModule} from '@angular/material/select';

imports : [MatSelectModule]

2- go to the the any component on your project and add the component

heyy

answered May 4, 2019 at 11:33

Maher Farhat

1

1 Comment

Sébastien Temprado Over a year ago

The question is about bootstrap. If you want to propose another library, you can propose it in a comment but it's not an answer!

Collectives™ on Stack Overflow

dropdown does not open with Angular

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related