lightweight alternative to jquery ui selectable in an angular project

Question

The jQuery UI selectable widget is a powerful tool.

https://jqueryui.com/selectable/

However, adding this widget to an angular project I suppose would be frowned upon as being against the "angular way". However, I have attempted to search extensively for an alternative plugin providing the same functionality as the selectable widget in both the jquery and the angular ecosystems, and I can find none. For example, the prominent Angular UI project has no such feature.

Am I missing something? Is there a pure javascript/css way to mimic the jQuery UI selectable widget that works across browsers, or is this yet another case where the best way to get the functionality is to ignore the "angular way" and include the jQuery UI widget?

Answer 1

I had a similar issue and have solved this by using selectable.js. It's still not 100% Angular, but it has much less overhead than including jquery and jquery-ui.

Example of integrating Angular with Selectable.js

A few things may require explanation:

1. Install selectable.js using e.g. npm
2. Include selectable.js by using import Selectable from 'selectable.js';. This works at least with webpacker and should thus work with projects created with angular cli
3. It is important to use the appendTo config item of selectable. This needs a reference to a div. In Angular this should be done with @ViewChild and requires that the div gets a tag, in this case #container. For details see https://stackoverflow.com/a/42591893/1128705
4. The reference to the container tag is only available after Angular has completed view initialization, thus we need to use AfterViewInit