Angular: How to detect toggle status in ng-bootstrap dropdown where there are several dropdowns

Question

I recently asked this question and it was well answered.

But I have another question: How to detect toggle status in ng-bootstrap dropdown where there are several dropdowns?

When I try doing it returns the status of the firstdropdown only. I cannot use a unique id as they don't contain the 'isopen()' method.

How can I detect toggle status in ng-bootstrap dropdown where there are several dropdowns?

Answer 1

why not use (openChange)???? see stackblitz

<div #drop1 ngbDropdown (openChange)="checkDropDown($event,1)">
  <button class="btn btn-outline-primary" ngbDropdownToggle >Toggle-1</button>
  <div ngbDropdownMenu aria-labelledby="dropdownConfig">
    <button ngbDropdownItem>Action - 1</button>
    <button ngbDropdownItem>Another Action</button>
    <button ngbDropdownItem>Something else is here</button>
  </div>
</div>

NOTE: If we can refered to the dropdown, we write

<div #drop1="ngbDropdown" 
      ngbDropdown (openChange)="checkDropDown($event,drop1)">
....
</div>
checkDropDown(open:boolean,dropdown: NgbDropdown) {
    console.log(open,dropdown.placement)

}

UPDATE, the official docs of ngbDropdown is here. Can be difficult undestand the API, so, try to explain sucintaly

Inputs are properties that we can add in .html as

<div ngbDropdown [propertie]="variable"..>
//or
<div ngbDropdown propertie="valor" ...>
//if is a string, don't forget use simple quotes e.g.
<div ngbDropdown autoClose="'outside'" ...>

Outputs son "events", if return a value we get the response using $event, e.g.

<div ngbDropdown (openChange)="myFunction($event)" ...>
//If we can send more arguments, simply
<div ngbDropdown (openChange)="myFunction($event,"some more")" ...>

And Methods are method that we can use in the .ts is we has a ViewChild or ViewChildren

<div #myngbDropdown ngbDropdown [propertie]="variable"..>

@ViewChild('myngbDropDown') mydrop:nhbDropDown;

ngOnAtferView()
{
    console.log(this.mydrop.isOpen())
}

Answer 2

I would do something like this:

I get all the dropdowns with ViewChildren

@ViewChildren(NgbDropdown)
dropdowns: QueryList<NgbDropdown>;
dropdown: NgbDropdown;

Then I would change checkDropDown method in this way:

checkDropDown(dropdown: any) {
  // Check which dropdown was clicked
  this.dropdown = this.dropdowns.find(x => (x as any)._elementRef.nativeElement == dropdown)
  // Check if the clicked dropdown is open
  console.log(this.dropdown.isOpen())
}

You should change your html file as well, by using template ref:

<div #drop1 ngbDropdown>
<button class="btn btn-outline-primary" ngbDropdownToggle (click)="checkDropDown(drop1)">Toggle-1</button>

...

<div #drop2 ngbDropdown>
<button class="btn btn-outline-primary" ngbDropdownToggle (click)="checkDropDown(drop2)">Toggle-2</button>

I drop here a working StackBlitz too.

P.S. Your buttons have the same ids, remove them: dropdownConfig