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:

 


    

    {{displayMessage}}

    

    

      

        {{option}}