CODEWITHSUNDEEP
angulartwitter-bootstrapangular-ui-bootstrapdropdownng-bootstrap
dynamo
dynamo

Reputation: 21

how to close other opened dropdowns in ngbootstrap

I am using ngbdropdown in multiple element like this

<div *ngFor="let item of items" class="most parent div">
<div (click)="doSomething()">
   <div ngbDropdown [autoClose]="'outside'">
        <button ngbDropdownToggle (click)="$event.stopPropagation();">
            Toggle dropdown 1
         </button>
        <div ngbDropdownMenu>
        <button ngbDropdownItem>Action - 1</button>
   </div>
</div>
<div (click)="doSomething()">
   <div ngbDropdown [autoClose]="'outside'">>
        <button ngbDropdownToggle (click)="$event.stopPropagation();">
            Toggle dropdown 2
        </button>
        <div ngbDropdownMenu>
        <button ngbDropdownItem>Action - 1</button>
   </div>
</div>
</div>

Basically some function gets called from parent element of dropdown.
To prevent parent element's (click) being called i am using $event.stopPropagation().
I have used autoclose property of ngb-dropdown to close it when user clicks outside of its area.

still when i open second dropdown 1st one is not closing.

is there any way to close any other opened dropdown without calling click event of its parent ? in angular ? using ngbDropDown ?

Upvotes: 0

Views: 3060

Answers (1)

Saneth Chandrasekara
Saneth Chandrasekara

Reputation: 471

This example might help you

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" ngbDropdownToggle>{{dropdownMenuName}}</button>
  <div class="dropdown-menu" aria-labelledby="sortMenu">
    <button class="dropdown-item" *ngFor="let sortOrder of sortOrders" (click)="ChangeSortOrder(sortOrder)">
      {{sortOrder}}
    </button>
  </div>
</div>


<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" ngbDropdownToggle>{{dropdownMenuName}}</button>
  <div class="dropdown-menu" aria-labelledby="sortMenu">
    <button class="dropdown-item" *ngFor="let sortOrder of sortOrders" (click)="ChangeSortOrder(sortOrder)">
      {{sortOrder}}
    </button>
  </div>
</div>

in component.ts 

  sortOrders: string[] = ['Year', 'Title', 'Author'];
  dropdownMenuName: string = 'Sort by...';

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

Upvotes: 2

Related Questions