ionic2-autocomplete: Can't bind to 'ngOutletContext'

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

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 17 (5 by maintainers)

Most upvoted comments

@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 😃

kadoshms on Nov 27, 2017

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

Browser Output: err1

even tried this css:


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

But Alas! all in vain.

ar27111994 on Dec 26, 2017