Angular 6 - Adding Bootstrap 4 Dropdown Menu in Angular Application and ng-bootstrap

How to add a library like bootstrap 4 in Angular 6 applications and use ng-bootstrap to attach behaviour for dropdown menu.

Table of Contents:
***********************
00:00:21 - Creating new Angular project
00:01:44 - npm install Bootstrap
00:03:45 - Import Bootstrap stylesheet in Angular project
00:04:54 - Add Bootstrap starter template
00:07:00 - Creating navigation component
00:09:04 - Getting the dropdown working
00:10:58 - Installing ng-bootstrap

Source Code
*************

Blog:
*****

[tsiyon]

Yes, I'm a bit late to the party, but thank for your clear and concise presentation.

[zabazor_makes]

Thank you. I had been struggling with using the ngbootstrap drop down. This helped me realize that I needed to add an import to the specific module where I wanted to use the directive. Reviewing that the refrence needed to be added to the root module, made me think of it, and fix it in less than 1hr. What a life saver.

[interesting]

Thanks a lot! I still had to figure out some some things and the comments helped a lot. Without your video I would have never done this.

[jeremylandry]

2020 and this tutorial still works in Angular 10 with a couple additions.

-For some reason, I was asked to run `ng add @angular/localize` before it would display in the browser. This is relevant to Angular 9+.
-ng-bootstrap added ngbDropdownItem as an attribute. I use v7.0.0

Thank you, thank you, thank you for this video. I've spent four hours online trying to find a tutorial half as helpful as this.

[kennyanthony]

Awesome thank you, I've been searching how to do this for hours.

[JesterUndead]

You just saved my life bro, thank you for this tutorial!

[ImCaveJohnson]

THANK YOU. Angular makes this so difficult for no good reason.

[codeinvestocoders]

you are great sir ! highly appreciated.

[codeinvestocoders]

When we resize our view to mobile, we are unable to use dropdown, as their they uses jquery.js, bootstrap.min.js, popper.js ? any video how to work with these dependencies ?

[adamwoolf]

I get a black screen and error msg saying export declar class NgbModule doesn't work...

[bishwajeetsharma]

Toggle doesn't work for me on reducing the screen size.

[antoniofernandez]

Two custions:

1. With jquery.slim.min.js and jpopper.min.js installed, the chrome console displays the following error:
popper.min.js: 4 Uncaught TypeError: Can not set property 'Popper' of undefined
at popper.min.js: 4
at popper.min.js: 4

2. Uninstalling jquery.slim.min.js and jpopper.min.js, the chrome console shows:
Uncaught TypeError: Can not read property 'fn' of undefined
at bootstrap.min.js: 6
at bootstrap.min.js: 6
at bootstrap.min.js: 6

[heramusic]

{
"resource": "/c:/Users/Karthick_Aadhi/example/src/app/app.module.ts",
"owner": "typescript",
"code": "2339",
"severity": 8,
"message": "Property 'forRoot' does not exist on type 'typeof NgbModule'.",
"source": "ts",
"startLineNumber": 15,
"startColumn": 15,
"endLineNumber": 15,
"endColumn": 22
}



please anyone tell me how to clear this error

[priyankaingole]

.forRoot() is deprecated in Angular 4 now, it does not exist for ngbModule. what is the alternate solution now ? any ideas ?

[verushkan]

It worked, but I had to remove ForRoot() to make it work. Also I had to install @ng-bootstrap/ng-bootstrap with "--force" attribute. Thanks!

[lebaf]

Help in angular 9 doesn't work for me :(, help please: c