ngb Dropdown - Scroll to Active Item

Question

I'm using an ngbDropdown as a selector for years. It's always 10 years in the future and in the past, while the current year is the initially selected year. The dropdown itself has a max height and is scrollable.

Now when I toggle the dropdown, the selected (active) value might be outside of the visible options. Is there an "easy" way to scroll this element into view, or even better to scroll so far, that the selected year would be in the middle of the visible options?

I've tried element.scrollIntoView, but for that I think the dropdown has to be visible, but I can't find any event which would trigger right after the dropdown-menu is rendered. For what I've found, there is a Bootstrap Javascript event "shown.bs.dropdown" which would be exactly what I need, but I can't find an equivalent in ngBootstrap. Or is there an even better way I'm overlooking?

user_390161 · Answer

It looks like you can use openChange event of the NgbDropdown

  /**
   * An event fired when the dropdown is opened or closed.
   *
   * The event payload is a `boolean`:
   * * `true` - the dropdown was opened
   * * `false` - the dropdown was closed
   */
  @Output() openChange = new EventEmitter();

Source code of the dropdown: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/dropdown/dropdown.ts#L213

ngb Dropdown - Scroll to Active Item

1 Answers