title: Dropdown menu with Bootstrap in Angular
body: <p>I'm practising Angular. Here is my practice project on <a href="https://stackblitz.com/edit/toan-angular-uebung-mqheur" rel="nofollow noreferrer">Stackblitz</a> </p>
  
  <p>I followed the <a href="https://angular.io/start" rel="nofollow noreferrer">Angular tutorial</a> 
  . Everything is great, no problem at all.</p>
  
  <p>Then, I tried this <a href="https://stackblitz.com/edit/angular-4p3swb" rel="nofollow noreferrer">tutorial</a> to add a dropdown menu</p>
  
  <ul>
  <li>I created a new component "dropdown-basic"</li>
  <li>Copied the dropdown-basic.html file over</li>
  <li>Copied the inhalt of Style tag in index.html to app.component.css</li>
  <li>Modified my app.module.ts according to the module.ts file in tutorial</li>
  <li>Added the dropdown-basic component to app.component.html</li>
  </ul>
  
  <p>But then, the dropdown menu doesn't work. the list items are always shown. And, the buttons don't hide or show the items. I would like some help please, thank you very much.</p>
  
  <p><strong>My screenshot</strong></p>
  
  <p><a href="https://i.stack.imgur.com/0FT5k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0FT5k.png" alt="enter image description here"></a></p>
  
  <p><strong><em>dropdown-basic.component.html</em></strong></p>
  
  <pre><code>
  &lt;div class="row"&gt;
    &lt;div class="col"&gt;
      &lt;div ngbDropdown class="d-inline-block"&gt;
        &lt;button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle&gt;Toggle dropdown&lt;/button&gt;
        &lt;div ngbDropdownMenu aria-labelledby="dropdownBasic1"&gt;
          &lt;button ngbDropdownItem&gt;Action - 1&lt;/button&gt;
          &lt;button ngbDropdownItem&gt;Another Action&lt;/button&gt;
          &lt;button ngbDropdownItem&gt;Something else is here&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col text-right"&gt;
      &lt;div ngbDropdown placement="top-right" class="d-inline-block"&gt;
        &lt;button class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle&gt;Toggle dropup&lt;/button&gt;
        &lt;div ngbDropdownMenu aria-labelledby="dropdownBasic2"&gt;
          &lt;button ngbDropdownItem&gt;Action - 1&lt;/button&gt;
          &lt;button ngbDropdownItem&gt;Another Action&lt;/button&gt;
          &lt;button ngbDropdownItem&gt;Something else is here&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong><em>dropdown-basic.component.ts</em></strong></p>
  
  <pre><code>
  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-dropdown-basic',
    templateUrl: './dropdown-basic.component.html',
    styleUrls: ['./dropdown-basic.component.css']
  })
  export class DropdownBasicComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p><strong><em>app.component.css</em></strong> </p>
  
  <pre><code>
  p {
    font-family: Lato;
  }
  
  /* Datepicker popup icon */
  
  button.calendar, button.calendar:active {
    width: 2.75rem;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAcCAYAAAAEN20fAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEUSURBVEiJ7ZQxToVAEIY/YCHGxN6XGOIpnpaEsBSeQC9ArZbm9TZ6ADyBNzAhQGGl8Riv4BLAWAgmkpBYkH1b8FWT2WK/zJ8ZJ4qiI6XUI3ANnGKWBnht2/ZBDRK3hgVGNsCd7/ui+JkEIrKtqurLpEWaphd933+IyI3LEIdpCYCiKD6HcuOa/nwOa0ScJEnk0BJg0UTUWJRl6RxCYEzEmomsIlPU3IPW+grIAbquy+q6fluy/28RIBeRMwDXdXMgXLj/B2uimRXpui4D9sBeRLKl+1N+L+t6RwbWrZliTTTr1oxYtzVWiTQAcRxvTX+eJMnlUDaO1vpZRO5NS0x48sIwfPc87xg4B04MCzQi8hIEwe4bl1DnFMCN2zsAAAAASUVORK5CYII=') !important;
    background-repeat: no-repeat;
    background-size: 23px;
    background-position: center;
  }
  
  /* Sortable table demo */
  
  th[sortable] {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
  
  th[sortable].desc:before, th[sortable].asc:before {
    content: '';
    display: block;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC') no-repeat;
    background-size: 22px;
    width: 22px;
    height: 22px;
    float: left;
    margin-left: -22px;
  }
  
  th[sortable].desc:before {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
  }
  
  /* Filtering table demo */
  ngbd-table-filtering span.ngb-highlight {
    background-color: yellow;
  }
  
  /* Complete table demo */
  ngbd-table-complete span.ngb-highlight {
    background-color: yellow;
  }
  
  ngb-carousel .picsum-img-wrapper {
    position: relative;
    height: 0;
    padding-top: 55%; /* Keep ratio for 900x500 images */
  }
  
  ngb-carousel .picsum-img-wrapper&gt;img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  </code></pre>
  
  <p><strong><em>app.module.ts</em></strong></p>
  
  <pre><code>
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  import { RouterModule } from '@angular/router';
  import { ReactiveFormsModule } from '@angular/forms';
  import { HttpClientModule } from '@angular/common/http'; /** The Angular HTTP client (HttpClient) is a built-in way to fetch data from external APIs and provide them to your application as a stream. */
  
  import { AppComponent } from './app.component';
  import { TopBarComponent } from './top-bar/top-bar.component';
  import { ProductListComponent } from './product-list/product-list.component';
  import { ProductAlertsComponent } from './product-alerts/product-alerts.component';
  import { ProductDetailsComponent } from './product-details/product-details.component';
  import { CartService } from './cart.service';
  import { CartComponent } from './cart/cart.component';
  import { ShippingComponent } from './shipping/shipping.component';
  import { DropdownBasicComponent } from './dropdown-basic/dropdown-basic.component';
  
  @NgModule({
    imports: [
      BrowserModule,
      HttpClientModule, /** use the HTTP client to retrieve shipping prices from an external file */
      ReactiveFormsModule,
      NgbModule,
      RouterModule.forRoot([ /** add routing for components */
        { path: '', component: ProductListComponent },
        { path: 'products/:productId', component: ProductDetailsComponent },
        { path: 'cart', component: CartComponent },
        { path: 'shipping', component: ShippingComponent },
      ])
    ],
    declarations: [
      AppComponent,
      TopBarComponent,
      ProductListComponent,
      ProductAlertsComponent,
      ProductDetailsComponent,
      CartComponent,
      ShippingComponent,
      DropdownBasicComponent
    ],
    bootstrap: [ AppComponent ],
    providers: [ CartService ],
    exports: [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong><em>app.component.html</em></strong></p>
  
  <pre><code>
  &lt;app-top-bar&gt;&lt;/app-top-bar&gt;
  
  &lt;div class="container"&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  
  &lt;div class="container-fluid"&gt;
  
      &lt;hr&gt;
  
      &lt;p&gt;
        This is a demo example forked from the &lt;strong&gt;ng-bootstrap&lt;/strong&gt; project: Angular powered Bootstrap.
        Visit &lt;a href="https://ng-bootstrap.github.io/" target="_blank"&gt;https://ng-bootstrap.github.io&lt;/a&gt; for more
        widgets and demos.
      &lt;/p&gt;
  
      &lt;hr&gt;
      &lt;app-dropdown-basic&gt;&lt;/app-dropdown-basic&gt;
  &lt;/div&gt;
  </code></pre>