Angular 2 element visibility check

Question

How to check if an element (or component) is displayed on the screen?

In the specific case, I have a component inside the bootstrap drop-down list, and I want my component to do someting only if the drop-down list is open (but I don’t want to use the dropdown link).

Answer 1

I would use ng-bootstrap if you hadn’t already, and in particular the NgbDropdown component.

https://ng-bootstrap.imtqy.com/#/components/dropdown

It has an openChange event that fires when a menu opens or closes, and you can listen to this event and fire your own logic.

It also has an isOpen method, which you can check to open whether the menu is open or not.

If these options do not perform the trick, you can turn off the drop-down menu button and create your own button to switch the drop-down menu and use manual triggers to open the menu and start your user logic and stop your logic and close the menu, although be careful to make the elementary the interface looked strange, as it confused users.