0

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?

marcom966
  • 1
  • 1
  • Does this answer your question? [No provider for NgbDropdown with Angular Bootstrap](https://stackoverflow.com/questions/54816008/no-provider-for-ngbdropdown-with-angular-bootstrap) – Yong Shun Jan 21 '23 at 03:18

1 Answers1

0

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>
JDev
  • 25
  • 6
  • It gives me another error: 'app-city-details-component' is not a known element: 1. If 'app-city-details-component' is an Angular component, then verify that it is part of this module. 2. If 'app-city-details-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. Thanks a lot for the reply however. – marcom966 Jan 21 '23 at 13:33
  • Try adding these in your App.module.ts `import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';` and `schemas: [ CUSTOM_ELEMENTS_SCHEMA ],` – JDev Jan 21 '23 at 14:10
  • Thank you, i just needed to turn app-city-details-component into a div and it worked. – marcom966 Jan 21 '23 at 15:34