Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'

Question

Below worked fine in Angular 4

<ng-container *ngFor="let user of list_users">
  <div *ngIf="currentUser.username !== user.username">
    <div class="card">
      bla bla
    </div>
  </div>
</ng-container>

Angular 5 is whining about this error:

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. ("
        <!-- CUSTOM TEMPLATE -->
        <ng-template
            [ERROR ->][ngOutletContext]="{ item: model, index: index }"
            [ngTemplateOutlet]="template">
        "): ng:///TagInputModule/TagComponent.html@12:12
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". ("div *ngSwitchCase="true" [attr.contenteditable]="editing">
        <!-- CUSTOM TEMPLATE -->
        [ERROR ->]<ng-template
            [ngOutletContext]="{ item: model, index: index }"
            [ngTemplateOut"): ng:///TagInputModule/TagComponent.html@11:8
    at syntaxError (compiler.js:466)
    at TemplateParser.parse (compiler.js:24314)
    at JitCompiler._parseTemplate (compiler.js:33701)
    at JitCompiler._compileTemplate (compiler.js:33676)
    at eval (compiler.js:33578)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:33578)
    at eval (compiler.js:33448)
    at Object.then (compiler.js:455)
    at JitCompiler._compileModuleAndComponents (compiler.js:33447)

Looking through the upgrade steps: https://angular-update-guide.firebaseapp.com/, I don't seem to have anything related to the ng-template thing.

Plus, that's the only place in my code I'm using <ng-template></ng-template>

How do I get this going?

This question has been mentioned on [meta](https://meta.stackoverflow.com/q/359165). /cc @GünterZöchbauer. — Just a student, Nov 10 '17 at 15:02
So I took my time drill down to the error. I was using a third-party package (ngx-chips), which was still using the deprecated whatever angular5 complains of. Updating the package fixed the error. https://github.com/Gbuomprisco/ngx-chips/issues/593 — KhoPhi, Dec 04 '17 at 16:33

Ramesh Rajendran · Answer 1 · 2017-11-10T12:12:55.897

34

ngOutletContext has been removed as it was deprecated since v4. Use ngTemplateOutletContext instead of ngOutletContext in angular 5

Check this : https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

and take this discussion if you want: Can't get ngTemplateOutlet to work

edited Nov 10 '17 at 12:12

answered Nov 10 '17 at 12:00

Ramesh Rajendran

37,412
45
153
234

3

:D replaced by itself? I think you forgot `#outletContext` – Günter Zöchbauer Nov 10 '17 at 12:07
1

@GünterZöchbauer I have update my answer ; Am just copied from the link which is am mentioned `NgTemplateOutlet#ngOutletContext has been removed as it was deprecated since v4. Use NgTemplateOutlet#ngTemplateOutletContext instead` :P – Ramesh Rajendran Nov 10 '17 at 12:13
1

What's the update for Angular 6 & 7? ngTemplateContext and ngTemplateOutletContext aren't found. Chaining `context = x` into `*ngTemplateOutlet` also does nothing – Dagrooms Mar 14 '19 at 00:53

Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'

1 Answers1

Linked