this.inputForm.onBlur.filter is not a function and Animations error

[idrakimuhamad]

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 error:

this.inputForm.onBlur.filter is not a function
    at TagInputComponent.setUpOnBlurSubscriber

My code looks more or less like this

<tag-input
            [(ngModel)]="data.types"
            [onTextChangeDebounce]="200"
            [onlyFromAutocomplete]="true"
            [clearOnBlur]="true"
            [removable]="mode === 'add' || mode === 'update'"
            [disabled]="mode === 'view' ? true : null"
            (onAdd)="updateServiceInput()"
            secondaryPlaceholder="+"
            placeholder="+">
            <tag-input-dropdown
              displayBy="name"
              identifyBy="name"
              [autocompleteObservable]="indicatorTypesSuggestion">
              <ng-template let-item="item" let-index="index">
                {{ item.name }}
              </ng-template>
            </tag-input-dropdown>
          </tag-input>

And afterwards, upon selecting an item from the suggestion, I received:

ERROR Error: Unable to process animations due to the following failed trigger transitions
@animation has failed due to:
- Please provide a value for the animation param enter
- The provided timing value "" is invalid.

Expected behavior

No error shouldn't be thrown.

Minimal reproduction of the problem with instructions (if applicable)

as described above.

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

angular-cli

Angular version:

version 4.1.1

ng2-tag-input version:

ngx-chips v1.4.5

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 in Chrome

[Gbuomprisco]

Hi, you should update to angular 4.2.0 at least

[idrakimuhamad]

Hey, I've updated to 4.2.6 and I'm still getting the error.

[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';

[idrakimuhamad]

Thanks @jwooley . Perhaps this should be made into the readme or something as not everyone expect to import filter from rxjs. Or it is stated somewhere but I'm blind. 😄

[Gbuomprisco]

Mine was an example but you can use whatever you want with the observable as it is done in your parent component :)