3

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?

mg1075
  • 17,985
  • 8
  • 59
  • 100
  • 1
    There's this (can't comment on whether this is good): https://github.com/willgm/ngSelectable – New Dev Apr 02 '15 at 04:06
  • @NewDev - Yes, I am familiar with that project - and it has a dependency on jQuery UI. https://github.com/willgm/ngSelectable/blob/master/README.md – mg1075 Apr 02 '15 at 04:15
  • Yes, it does. But I don't see where in your question you specified that no dependency on jQuery UI as a condition. – New Dev Apr 02 '15 at 04:16
  • @New Dev - ok, but the question does say, "Is there a pure javascript/css way to mimic the jQuery UI selectable widget...?" – mg1075 Apr 02 '15 at 04:18
  • 1
    You have a false dichotomy there: "is there a pure JS way... or is this another case of ignoring the Angular way". Creating a directive that wraps jQuery-UI functionality is not ignoring the Angular way. But, in any case, the question is off-topic because it asks to recommend a library – New Dev Apr 02 '15 at 04:22
  • @New Dev - see this canonical answer on stackoverflow and how it ends with "Don't even use jquery". http://stackoverflow.com/a/15012542/538962 – mg1075 Apr 02 '15 at 04:27
  • I'm familiar with the question/answer. That recommendation is meant to prevent people from reasoning incorrectly about Angular, which is about manipulating the state of the app, rather the View. But ultimately, something has to manipulate the view, which is what a directive is used for. A directive is where one would wrap a jQuery or any other third-party control. – New Dev Apr 02 '15 at 04:40

1 Answers1

2

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
Florian Feldhaus
  • 5,567
  • 2
  • 38
  • 46
  • Thanks. The original question is about AngularJS, not Angular2+. Looks like no one tried to integrate this with AngularJS yet... – mg1075 Aug 09 '19 at 22:57
  • 1
    I wasn't really aware that the question is regarding AngularJS, as the title mentions angular. But the solution I proposed does work with AngularJS as well with minimal modifications! – Florian Feldhaus Aug 10 '19 at 08:22
  • Yeah. I went to the github repo and it looked like somebody was able to do a basic example with AngularJS, then ran into trouble when trying to use in conjunction with an `ng-repeat`. Perhaps a proper AngularJS directive has to be built to accomodate. https://github.com/Mobius1/Selectable/issues/16 – mg1075 Aug 10 '19 at 21:21