Ngx-chips: onTextChange.filter is not a function

[jwooley]

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request/question

Current behavior

I'm getting the following error when trying to initialize a component using the taginput. As a result, I'm not getting text change notifications which I need when trying to use the observable source rather than autocompleteitems for other controls as well.

TypeError: this.tagInput.onTextChange.filter is not a function
    at TagInputDropdown.ngOnInit (tag-input-dropdown.component.ts:159)
    at checkAndUpdateDirectiveInline (provider.ts:272)
    at checkAndUpdateNodeInline (view.ts:505)
    at checkAndUpdateNode (view.ts:443)
    at debugCheckAndUpdateNode (services.ts:377)
    at debugCheckDirectivesFn (services.ts:464)
    at Object.View_CrimeComponent_1._co [as updateDirectives] (Crime.html:63)
    at Object.debugUpdateDirectives [as updateDirectives] (services.ts:443)
    at checkAndUpdateView (view.ts:359)
    at callViewAction (view.ts:765)

Expected behavior

I wouldn't see the error and suggestions would be filtered on keypress.

Minimal reproduction of the problem with instructions (if applicable)
I've used the following markup for my sample. The model appears to bind and autocompleteitems show.

                    <tag-input name="Race" 
                               [(ngModel)]="model.Victim.Race" 
                               [onlyFromAutocomplete]="true"
                               [placeholder]="'Select all that apply'"
                               >
                        <tag-input-dropdown 
                               [autocompleteItems]="model.RacesValues"
                               [showDropdownIfEmpty]="true"
                               [displayBy]="'Value'"
                               [identifyBy]="'Value'"></tag-input-dropdown>
                    </tag-input>

What is the motivation / use case for changing the behavior? (if applicable)

What do you use to build your app? (SystemJS, Webpack, angular-cli, etc.). Please specify the version
SystemJS - ^0.20.14

Angular version:
4.2.4

ng2-tag-input version:
ngx-chips: ^1.4.5-beta

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Tested on chrome and Edge

[Gbuomprisco]

Hi can you try the latest version?

[jwooley]

@Gbuomprisco The most recent one that I can find is on npm 1.4.5-beta. We're using npm to load all of our dependencies. Which version are you referring to?

[Gbuomprisco]

The latest one should be 1.4.5 I guess?

[jwooley]

Found out that this was caused by not importing the rxjs filter. Adding the following to my module fixed the issue:
import 'rxjs/add/operator/filter';

This appears to be the same issue as #486

[malsmith]

The error I got was:
this.tagInput.onTextChange.debounceTime is not a function

In case others find this issue - your angular component file where you declare an @Component MUST have these two lines in the import section

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';

[MmtBkn]

Let's make it 3 (I think) if you have dropdown too, but why?

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/map';