Can't bind to 'ngOutletContext'

[Hermiona]

I installed ionic2-autocomplete@1.5.3-beta but when I got the error below, I did uninstall it and installed ionic2-autocomplete@1.5.2-release but anyway the error is the same. Also there is the following warn: npm WARN ionic2-auto-complete@1.5.3-beta requires a peer of @angular/core@^4.0.0 but none was installed.

I get the following error:

Uncaught Error: Template parse errors:
Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.
1. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("mplate
                      [ngTemplateOutlet]="template || defaultTemplate"
                      [ERROR ->][ngOutletContext]="
                        {attrs:{ data: suggestion, keyword: keyword, labelAttribu"): ng:///AutoCompleteModule/AutoCompleteComponent.html@41:22
Property binding ngOutletContext not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("gestion of suggestions" (tap)="select(suggestion);$event.srcEvent.stopPropagation()">
              [ERROR ->]<ng-template
                      [ngTemplateOutlet]="template || defaultTemplate"
                 "): ng:///AutoCompleteModule/AutoCompleteComponent.html@39:14

My package json looks like this:

     "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/compiler-cli": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",

Ionic info gives the following results:

cli packages: (C:\Users\Meerim\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.15.2
    ionic (Ionic CLI) : 3.15.2

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.0
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 25.2.5
    Node              : v6.11.0
    npm               : 3.10.10
    OS                : Windows 10

It is written that in Angular 5 there is no more ngOutletContext and that we should use ngTemplateOutletContext instead. I replaced with ngTemplateOutletContext in all files in node_modules/ionic2-autocomplete directory found by searching text 'ngOutletContext' but that did not help. Please help me to fix this. P.S. i am newbie in npm-related stuff

[sandervankasteel]

This is caused by using Angular 5.0. My suggestion is either downgrade to Angular 4.x or wait until a new version of this package is released.

Disclaimer: I'm not a maintainer or anything of this project. But I'm currently waiting on a new release of this packages, so I'm "watching" this project and I saw multiple issues of this.

[kadoshms]

@sandervankasteel @Hermiona Iv'e published an experimental version with ng5 support: ionic2-auto-complete@1.6.0-alpha I am a bit short in time at this period, and unfortunately don't have enough time to test myself , so I'll be glad to get some feedback from you :)

[sandervankasteel]

Awesome @kadoshms! I will check it out and let you know.

[Hermiona]

thanks

[kadoshms]

@Hermiona @sandervankasteel do you have any feedback? :)

[sandervankasteel]

In all fairness, I haven't had the chance to checkout it yet... Hope to do it at the end of my day

[manuvalentim]

I used ionic2-auto-complete@1.6.0-alpha and it worked for me. Thanks!

[kadoshms]

@manuvalentim Thanks!

[lmigula]

Same here. The error disappeared after upgrading to ionic2-auto-complete@1.6.0-alpha

[sandervankasteel]

I've used the new alpha version as well and everything worked out just fine! 🎉

[kadoshms]

Thanks guys, closing this for now :)

[matvaleriano]

Can't bind to 'dataProvider' since it isn't a known property of 'ion-auto-complete'. what's the substitute?

[kadoshms]

@mathvaleriano this is not related to this issue :) Did you import the module properly?

[matvaleriano]

sorry about that. it works with import .. thx

[ar27111994]

Hi, my suggestions are not showing in Ionic 3.9.2 and Angular 5.0.3. Please help! I've literally tried each and everything but search suggestions just won't show up. Please help! @kadoshms

Service Code:

@Injectable()
export class FilterNameServiceProvider extends DataServiceProvider implements AutoCompleteService  {

    labelAttribute = "name"
    getResults(name: string) {
        return Observable.fromPromise(this.fetchData('product/autocomplete', { filter_name: name })).mergeMap((res) => {
            if(!res['isNotAuthenticated']) {
              delete res['isNotAuthenticated'];

              return res;
            }
        })
    }

}

Template Code:

<ion-header>
  <ion-toolbar>
    <ion-title>{{ button_filter | htmlDecode }}</ion-title>
    <ion-buttons start>
      <button ion-button icon-left clear item-start (click)="dismiss()">
        <ion-icon name="close-circle"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
      <ion-auto-complete class="overflow" item-content [(ngModel)]="filter_name" [dataProvider]="nameAutocomplete" [options]="{ placeholder: entry_name | htmlDecode }"></ion-auto-complete>
</ion-content>

Fetched Response from Server:

Browser Output:

even tried this css:

.overflow {
        contain: none; 
        overflow: visible;
 }

But Alas! all in vain.

[pedelon]

Is there a way to use ionic2-auto-complete with a simple array of strings? and not with a provider

[ar27111994]

Hi @pedelon , Maybe try wrapping that array inside an Observable. And don't forget to use map on Observable results.