0

I am trying to use the typeahead jquery plugin with Angular 2.

This plugin emits several events, one of which 'typeahead:select' i want to bind to.

I've tried these

<input class="form-control" id="search" name="search" on-typeahead-select="onSelect()" />

<input class="form-control" id="search" name="search" (typeahead-select)="onSelect()" />

but none seem to work, the onSelect() method in the component is never called. Is there a way to do this, or is it just not supported?

prb
  • 171
  • 1
  • 2
  • 10

1 Answers1

0

You can't use a jQuery typeahead plugin with Angular 2 and then try to bind to the event using Angular syntax.

They are two completely different frameworks, that have different event systems. They aren't designed to talk to eachother.

When you use this syntax (typeahead-select)="onSelect()" you are using a syntax specific to Angular 2 which is designed to catch an event from the EventEmitter, you can't pick up a jQuery event using this syntax, it's not possible.

You can however sprinkle a bit of jQuery into your Angular 2 code, if you really need to work with the DOM manually in a way that Angular 2 won't easily allow you to do. It is considered bad practice and best kept to a minimum.

You need to use ng2-typeahead

williamsandonz
  • 15,864
  • 23
  • 100
  • 186
  • _"You can't use a jQuery typeahead plugin with Angular 2 and then try to bind to the event using Angular syntax."_ is this best practice, Angular 2 does not allow you to work with jQuery or what is the reason jQuery can't be used with Angular 2? – coderdark Dec 16 '16 at 02:47
  • mmmm... have you seen this question: http://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2 ? – coderdark Dec 16 '16 at 03:20
  • In that answer, they are programatically binding to the chosen jQuery event (not using Angular 2 syntax on the component HTML). Some people chose to incur the nastiness of using chosen in Angular 2 because there is no pure Angular 2 equivlant yet (or atleast I don't think so). However, there are plenty of Typeahead Angular 2 modules/components available, so there is no need to use jQuery typeahead, from an architecture standpoint it's very bad practice. – williamsandonz Dec 16 '16 at 03:28