question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't bind to 'ngOutletContext'

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:17 (5 by maintainers)

github_iconTop GitHub Comments

6reactions
kadoshmscommented, Nov 27, 2017

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

3reactions
ar27111994commented, Dec 26, 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't bind to 'ngOutletContext' since it isn't a known property of ...
@GünterZöchbauer I have update my answer ; Am just copied from the link which is am mentioned NgTemplateOutlet#ngOutletContext has been removed ...
Read more >
Can't bind to 'ngOutletContext' since it isn't a known ... - GitHub
Hi guys, this is the error I have been receiving from the Angular 5.1.1 version and Covalent 1.0.1, and only solution for me...
Read more >
angular/angular - Gitter
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 ...
Read more >
can t bind to ngtemplateoutlet since it isn t a known property of ...
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' ......
Read more >
can't bind to 'ngmodel' since it isn't a known property of 'input'.
Angular 5 - Can't bind to 'ngModule' since it isn't a known property of 'input' 1 Template parse errors: Can't bind to 'ngOutletContext'...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found