ng-bootstrap not working in dropdown in angular

Question

I want to use ng-bootstrap in my dropdown but it's not working. I have imported NgbModule in app.module.ts. I have attached images below .

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">

Organic Shop

<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" routerLink="/">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="/shopping-cart">Shopping Cart</a>
  </li>
  <li ngbDropDown class="nav-item dropdown">
    <a ngbDropdownToggle class="nav-link dropdown-toggle"  id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Username</a>
    <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdown01">
      <a class="dropdown-item" routerLink="/my/orders">My Orders</a>
      <a class="dropdown-item" routerLink="/admin/orders">Manage Orders</a>
      <a class="dropdown-item" routerLink="/admin/products">Manage Products</a>
      <a class="dropdown-item" routerLink="">Log Out</a>
    </div>

  </li>

Output after the above code

it would be better if you paste the code than image

Abhishek Ekaanth
– Abhishek Ekaanth

2018-02-22 09:03:51 +00:00
Commented Feb 22, 2018 at 9:03 — Abhishek Ekaanth
– Abhishek Ekaanth, Commented Feb 22, 2018 at 9:03
done pasting code.

dhellryder
– dhellryder

2018-02-22 09:05:20 +00:00
Commented Feb 22, 2018 at 9:05 — dhellryder
– dhellryder, Commented Feb 22, 2018 at 9:05
What’s not working ? Do you receive error messages ?

Safiyya
– Safiyya

2018-02-22 09:06:15 +00:00
Commented Feb 22, 2018 at 9:06 — Safiyya
– Safiyya, Commented Feb 22, 2018 at 9:06
No error messages

dhellryder
– dhellryder

2018-02-22 09:08:02 +00:00
Commented Feb 22, 2018 at 9:08 — dhellryder
– dhellryder, Commented Feb 22, 2018 at 9:08

Arun Kumar · Accepted Answer · 2018-02-22 10:11:35Z

3

In your Module, add ngbmodule as root and also add it to providers.

import { NgbModule, NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";


   imports: [    
        NgbModule.forRoot(),
    ],
   providers: [NgbActiveModal],

answered Feb 22, 2018 at 10:11

Arun Kumar

1,5891 gold badge19 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

ng-bootstrap not working in dropdown in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related