how to take the value of Dropdown in ng-bootstrap?

user_6719684 0
Viewed 5841

i'm using ng-bootstrap and i want to get the value of dropdown when selected .

 <div class="col text-right">
<div ngbDropdown placement="top-right" class="d-inline-block">
  <button class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>
</div>

ng-bootstrap angular
3 Answers

You need to add a click event:

 <button class="dropdown-item" (click)="changeAction(obj)">

In the component:

changeAction(obj) {
        //your logic here
}
user_37943430

I have achieved things in following way in Angular 6,

In my .html file,

<div class="row">
  <div class="col">
    <div ngbDropdown class="d-inline-block">
      <button
        class="btn btn-outline-primary"
        id="dropdownBasic1"
        ngbDropdownToggle
      >
        {{searchSelector}}
      </button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1" >
        <button ngbDropdownItem (click)="ngDropDwonClick('Action 1')">
          Action - 1
        </button>
        <button ngbDropdownItem (click)="ngDropDwonClick('Action 2')">
           Action - 2
        </button>
        <button ngbDropdownItem (click)="ngDropDwonClick('Action 3')">
          Action -3
        </button>
      </div>
    </div>
  </div>

And in my .ts file,

searchSelector = "Deafult";

  ngDropDwonClick(value) {
    this.searchSelector = value;
  }

you can find a working demo here, https://stackblitz.com/edit/angular-w6ycdf-t4s2ut?file=src%2Fapp%2Fdropdown-basic.ts

user_55669650

This runs without any javascript backend code. Solution is build upon angular template variables. Until no item is selected a place holder text "Select Environment" is displayed.

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdown"
       ngbDropdownToggle>{{ selectedValue.value || "Select Environment" }}</button>
    <div ngbDropdownMenu aria-labelledby="dropdown" #selectedValue>
      <div *ngFor="let env of environments;" >
        <button ngbDropdownItem id="option" on-click="selectedValue.value=env">{{env}} 
        </button>
      </div>
    </div>
</div>
user_106004670
Related