Can't bind to 'ngTemplateOutletContext'

Question

I have converted Angular 4 to Angular 6 and I have built the project and geting the following error. Any idea how to handle?

Can't bind to 'ngTemplateOutletContext' since it isn't a known property of 'ng-container'.

<ul *ngIf="item.childrens != undefined && item.childrens.length > 0">
   <ng-container *ngTemplateOutletContext="recursiveList; context:{ $implicit: item.childrens }"></ng-container>
</ul>

My question is on TemplateOutletContext, not TemplateOutlet.

Sorry, wrong link. But it's already answered actually: https://stackoverflow.com/questions/47221088/cant-bind-to-ngoutletcontext-since-it-isnt-a-known-property-of-ng-template — P.S., Jul 09 '18 at 15:30
It has not been answered, there is no accepted answer. If you check given answer, I already changed to `ngTemplateOutletContext` — casillas, Jul 09 '18 at 15:31

score 20 · Accepted Answer · answered Jul 09 '18 at 17:54

As per the docs:

ngTemplateOutletContext bound to NgTemplateOutlet.ngTemplateOutletContext

So you would be able to attach context in the following way:

<ng-container 
  [ngTemplateOutlet]="recursiveList"
  [ngTemplateOutletContext]="{ $implicit: item.childrens }"></ng-container>

Or:

<ng-container *ngTemplateOutlet="recursiveList; context: { $implicit: item.childrens }"></ng-container>

Angular needs to know what view you intend on adding your context object to, so ngTemplateOutletContext won't work on its own AFAIK.

Source, Demo

score 1 · Answer 2 · answered Oct 09 '20 at 22:53

The above-accpected answer did not work for me. People you are looking for this in the future.

Here is the correct syntax, when you want to send the dynamic data to ng-template as input/variable using ngTemplateOutletContext like (item.childrens rather than the item itself).

<div>
    <ng-container [ngTemplateOutlet]="templateName"
        [ngTemplateOutletContext]="{$implicit: 'Hello World', object2: 'John Doe'}">
 </ng-container>
</div>

<ng-template #templateName let-default let-object2="object2">
    {{default}}
    {{object2}}
</ng-template>

Can't bind to 'ngTemplateOutletContext'

2 Answers2