ngbDropdownMenu.close() on multiple dropdowns - html

Question

I'm working on a data visualizer project. In this project users need to be able to make look ups to make it easy to find cretin data quickly. To do this I'm am using ngbDropdownMenu from NgBootstrap. They click a button and a little dropdown menu pops up so they can make a new look up.
When the menu pops up. They give a name and description to the new look up and hit submit. It will then create a new look up and fire an event I made so that I can close the dropdown menu NgbDropdownMenu.close();
HTML for the dropdown menu
<div ngbDropdown id="caseCodeDropdown"
(openChange)="openChange($event);"
class="input-group-append d-inline-block col-sm-1 px-0 mx-0">
<button ngbDropdownToggle class="btn btn-sm btn-outline" type="button" >
<i class="fal fa-plus"></i>
</button>
<div ngbDropdownMenu>
<newLookUpComponent></newLookUpComponent>
</div>
</div>
Component for dropdown menu
#ViewChild(NgbDropdownMenu) caseCodeDropdown: NgbDropdownMenu;
public dropdownCloseSub: Subscription = new Subscription;
constructor(private _eventEmitterService: EventEmitterService) { }
public ngOnInit(): void {
this.dropdownCloseSub = this._eventEmitterService.invokeSubmitNewMatterCode.subscribe(() => {
this.caseCodeDropdown.dropdown.close();
});
}
This works perfectly. The problem is when I need to have more than one dropdown menus on one page. I have five look ups for one of the pages and when I use the code below it only works for the caseCodeDropdown which is the first dropdown from the top of the html doc.
HTML with more than one dropdown menu
<div ngbDropdown id="caseCodeDropdown"
(openChange)="openChange($event);"
class="input-group-append d-inline-block col-sm-1 px-0 mx-0">
<button ngbDropdownToggle class="btn btn-sm btn-outline" type="button" >
<i class="fal fa-plus"></i>
</button>
<div ngbDropdownMenu>
<newLookUpComponent></newLookUpComponent>
</div>
</div>
<div ngbDropdown id="fileNoDropdown"
(openChange)="openChange($event);"
class="input-group-append d-inline-block col-sm-1 px-0 mx-0">
<button ngbDropdownToggle class="btn btn-sm btn-outline" type="button" >
<i class="fal fa-plus"></i>
</button>
<div ngbDropdownMenu>
<newLookUpComponent></newLookUpComponent>
</div>
</div>
<div ngbDropdown id="OPCDropdown"
(openChange)="openChange($event);"
class="input-group-append d-inline-block col-sm-1 px-0 mx-0">
<button ngbDropdownToggle class="btn btn-sm btn-outline" type="button" >
<i class="fal fa-plus"></i>
</button>
<div ngbDropdownMenu>
<newLookUpComponent></newLookUpComponent>
</div>
</div>
Component with more than one dropdown menu
#ViewChild(NgbDropdownMenu) caseCodeDropdown: NgbDropdownMenu;
#ViewChild(NgbDropdownMenu) fileNoDropdown: NgbDropdownMenu;
#ViewChild(NgbDropdownMenu) OPCDropdown: NgbDropdownMenu;
public dropdownCloseSub: Subscription = new Subscription;
constructor(private _eventEmitterService: EventEmitterService) { }
public ngOnInit(): void {
this.dropdownCloseSub = this._eventEmitterService.invokeSubmitNewMatterCode.subscribe(() => {
this.caseCodeDropdown.dropdown.close();
this.fileNoDropdown.dropdown.close();
this.OPCDropdown.dropdown.close();
});
}
WHAT I HAVE TRIED
First I tried
#ViewChild("caseCodeDropdown") caseCodeDropdown: NgbDropdownMenu;
#ViewChild("fileNoDropdown") fileNoDropdown: NgbDropdownMenu;
#ViewChild("OPCDropdown") OPCDropdown: NgbDropdownMenu;
Using #ViewChild() passing in the id of the element left all the caseCodeDropDown, fileNoDropdown, OPCDropdown as undefinded. I was unable to close them.
Next
var target = document.getElementId('caseCodeDropdown');
The problem with this method is I'm unable to use the ngbDropdownMenu functions. target.dropdown.close() throws an error.
Is there any other way I can get the element by its ID and still use the ngbDropdownMenu functions.
Thanks for your time!