NgbDropdown click event not working

Question

I know I am missing something small but have to ask because this just isnt working. The click event for the button is not firing. I have started with the documentation and then moved here copied this in to one of my pages. When I add in the NgbdDropdownBasic module it breaks. If I dont add that in they the css and button render correctly but the click event isnt firing. Not sure what along the way I missed?

import {Component} from '@angular/core';

@Component({
selector: 'dropdown-demo-sortby',
template: `
<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="sortMenu" ngbDropdownToggle>
   {{selectedSortOrder}}</button>
  <div class="dropdown-menu" aria-labelledby="sortMenu">
    <button class="dropdown-item" *ngFor="let sortOrder of sortOrders" 
    (click)="ChangeSortOrder(sortOrder)" >{{sortOrder}}</button>
   </div>
  </div>
 `
 })
 export class DropdownDemoSortby {

 sortOrders: string[] = ["Year", "Title", "Author"];
 selectedSortOrder: string = "Sort by...";

  ChangeSortOrder(newSortOrder: string) { 
  this.selectedSortOrder = newSortOrder;
 }

}

I imported NgbModule.forRoot() in my app module. Then in my component I've added

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbdDropdownBasic } from './dropdown-basic'; <--getting compile error

Answer 1

You are missing a

ngbDropdownMenu

tag in your inner div. Should be:

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="sortMenu" ngbDropdownToggle>
   {{selectedSortOrder}}</button>
  <!-- Missing tag added below -->
  <div class="dropdown-menu" aria-labelledby="sortMenu" ngbDropdownMenu>
    <button class="dropdown-item" 
            *ngFor="let sortOrder of sortOrders" 
             (click)="ChangeSortOrder(sortOrder)">{{sortOrder}}
    </button>
  </div>
</div>