How to configure NgbDropdown to display the selected item from the dropdown

Question

In ng-bootstrap NgbDropdown, how would you display the text of the selected button so that what ever item the user selects replaces the default text initially shown?

Answer 1

I solved this by hooking into the on-click event of the selected button ( using the blur event doesn't work in Firefox) - Plunkr demo

The component:

export class NgbdDropdownBasic {
    displayMessage = "Sort by...";
    sortOptions = ["Balance", "Company", "Last Name"]

    changeMessage(selectedItem: string){
       this.displayMessage = "Sort by " + selectedItem;
     }
 }

The template with NgbDropdown:

 <div ngbDropdown class="d-inline-block">

    <button class="btn btn-outline-primary"
            id="dropdownMenu1"
            ngbDropdownToggle >

    {{displayMessage}}

    </button>

    <div class="dropdown-menu" id="options" aria-labelledby="dropdownMenu1">
      <div *ngFor="let option of sortOptions">
        <button class="dropdown-item" 
                id="option" on-click="changeMessage(option)">{{option}}</button>

      </div>
    </div>
  </div>

Answer 2

Demonstrated in this plunkr.

Example Component:

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;
  }

}