Issue
Is there a simple way how to toggle Bootstrap 4 dropdown menu on contextmenu event in Angular 4 application without using ngx-bootstrap library?
The Bootstrap documentation says that you can toggle the dropdown from JavaScript by calling:
$('.dropdown-toggle').dropdown()
So I tried to execute this in the contextmenu event handler but it did not work. I always get an error saying:
…dropdown is not a function
I have also tried to call dropdown() function directly on the native element of ElementRef got from @ViewChild() but I get the same error.
Where is the problem? I can toggle the dropdown by using data attributes (so I assume Bootstrap scripts work here) but it is not possible to toggle it on contextmenu this way, or is it?
I would prefer a solution without any external library.
Solution
I have finally realized that just showing the Bootstrap dropdown menu would not be enough and I would also like to position the context menu where I clicked but do not want to implement this by myself.
That is why I have decided to use ngx-contextmenu although I previously mentioned that I did not want to use any external library. It is quite easy to set up and also makes use of Bootstrap dropdown styles which is what I wanted to accomplish in the first place.
If anybody wants to use this library, just be aware of this bug which cases that the context menu is not shown by default at the moment.