kadoshms / ionic2-autocomplete

Ionic 2 autocomplete component
MIT License
149 stars 108 forks source link

Can't bind to 'ngOutletContext' #128

Closed Hermiona closed 6 years ago

Hermiona commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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

Hermiona commented 6 years ago

thanks

kadoshms commented 6 years ago

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

sandervankasteel commented 6 years ago

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

manuvalentim commented 6 years ago

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

kadoshms commented 6 years ago

@manuvalentim Thanks!

lmigula commented 6 years ago

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

sandervankasteel commented 6 years ago

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

kadoshms commented 6 years ago

Thanks guys, closing this for now :)

matvaleriano commented 6 years ago

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

kadoshms commented 6 years ago

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

matvaleriano commented 6 years ago

sorry about that. it works with import .. thx

ar27111994 commented 6 years ago

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.

pedelon commented 6 years ago

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

ar27111994 commented 6 years ago

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