ERROR NullInjectorError: R3InjectorError(AppModule)[NgbDropdown -> NgbDropdown -> NgbDropdown]: NullInjectorError: No provider for NgbDropdown

Question

I'm very new to angular as i'm leaning it right now in a intnership. However, i would like to learn how to correctly set a dynamic dropdown in ngBootstap as i'm getting the following error: Error

Here's my HTML:

parent:

<div class="container" id="container">
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>
      Dropdown button
    </button>
    <div app-city-details-component *ngFor="let city of cityArray" [city]="city" ngbDropdownMenu>
    </div>
  </div>

Child:

<div class="container" id="container" ngbDropdownItem>
<button class="button" type="button" (click)="handleClick()">
    <p>{{city.name}}</p>
    <p>Latitudine: {{latitudine}}</p>
    <p>Longitudine: {{longitudine}}</p>
    <p>Timezone: {{timezone}}</p>
    <div app-show-weather-conditions [weather]="currentRealWeather"></div>
</button>

My app.module.ts:

app.module.ts

What i'm doing wrog?

Answer 1

Try closing your code inside a div with ngbDropdown and wrapping the child inside another div with ngbDropdownMenu.

<div class="container" id="container">

<!-- Add this -->
<div ngbDropdown> 

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>
      Dropdown button
    </button>
    <!-- Change this -->
    <div ngbDropdownMenu>
   <app-city-details-component 
   *ngFor="let city of cityArray"    [city]="city"> 
    </app-city-details-component>
    </div>

 </div>

</div>