Chips autocomplete for Angular 1.6. No angular-material

Question

I would need to add an autocomplete chips component in our Angular 1.6 application. We are using Typescript, Webpack 2. As we are already using angular-ui-bootstrap, we do not want to introduce also angular-material in order to avoid style conflicts. However the wished result is exactly what material chips provide.

Is there a directive or component that i can use in my case? I found this library but it runs endless exceptions when I import it.

unfortunately I could find only partial solutions with bootstrap typehead, but then I would need to implement all the "chips" part, making me think of re-inventing the wheel.

Answer 1

Stack Newb here. I have an identical problem as yours. Here's how I resolved this:

1. Resolve the ReferenceError: error is not defined within the angular-chips library

The library you used (angular-chips) wasn't designed with typescript in mind. So, you'll first need to resolve the following error ReferenceError: error is not defined by defining it for them in the line above with var error;. This should prepare angular-chips for your webpack useage.

The second issue you'll find is how to add your typeahead-template-url with webpack in the mix. Rather than referring to a separate html file, use an inline template as referenced here: Bootstrap-UI Typeahead display more than one property in results list?.

If you're lazy like me and don't want to follow that hyperlink, use this as example:

2. Template to be added before the <chips> tag:

<script type="text/ng-template" id="yourTemplate.html">
    <a tabindex="-1">
      <i ng-class="'icon-'+match.model.type"></i>
      <span  ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span>
   </a>
</scrip>

3. Include template in your directive:

typeahead-template-url:"yourTemplate.html"

Worked like a charm for me.