Viewed 8 times
0
<https://stackoverflow.com/posts/63141927/timeline>
I'm using NgbDropdown in my angular application. I have two components
*CompParent* and *CompChild*. Where *compChild* holds the HTML for dropdown
and it is included into *CompParent*. I'm trying close all the opened
dropdowns in page when a scroll event happens on scrollable-div.
*comp-child.component.html:*
<div ngbDropdown container="body">
<button class="btn btn-outline-primary btn-sm"
ngbDropdownToggle>Actions</button>
<div ngbDropdownMenu>
<button ngbDropdownItem>Edit</button>
<button ngbDropdownItem>Duplicate</button>
<button ngbDropdownItem>Move</button>
<div class="dropdown-divider"></div>
<button ngbDropdownItem>Delete</button>
</div></div>
And *CompChild* is included into *CompParent* like this:
*comp-parent.component.html*
<div class="scrollable-div" (scroll)="closeAllDropdowns($event)">
<div class="dropdown-container" *ngFor="let item of items">
<app-comp-child></app-comp-child>
</div></div>
What i have tried is:
in *compParent* TS:
export class compParentComponent{
@ViewChild(NgbDropdown) private readonly dropdown: NgbDropdown;
@HostListener('scroll', ['$event'])
closeAllDropdowns(event) {
this.dropdown.close();
}
}
But this.dropdown returns undefined and says close method is not a function
associated with it. Also i tried to select all dropdowns using templateRef,
that too didn't work.
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/1dafa7b5-b649-4146-bd6f-a33cd4fc90b3o%40googlegroups.com.
