angular2 ng-container how to use dynamic ngTemplateOutletContext

Question

I'm trying to use ng-container with NgTemplateOutlet (https://angular.io/docs/ts/latest/api/common/index/NgTemplateOutlet-directive.html)

      <div *ngFor="let child of children; let i=index">
      <ng-container *ngTemplateOutlet="inputTpl; { $implicit: child, index: i }"></ng-container>
  </div>

Thie results in the error

Unexpected token {, expected identifier, keyword, or string at column 11 in [inputTpl; { $implicit: child, index: i }]

When I use 'context:' like in the docs, this leads to

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

If I use a object declared in my ts file and set it instead of my Object, everything is working fine. Moreover this is also working fine:

      <div *ngFor="let child of children; let i=index" class="form-group">
      <template [ngTemplateOutlet]="inputTpl" [ngOutletContext]="{ $implicit: child, index: i }" />
    </div>

Does anybody know, how I can use ng-container with *ngTemplateOutlet and ngTemplateOutletContext generated in the html?

Answer 1

Example for angular 5.

<ng-container  [ngTemplateOutlet]="optionTemplate.template" [ngTemplateOutletContext]="{option:option}">
</ng-container>


<p-auto-complete property='searchText' [options]="options"(onChange)="select($event)">
        <ng-template pOptionTemplate  let-option="option">
            <div>
              //...
            </div> 
        </ng-template>
 </p-auto-complete>

stackblitz

Answer 2

Did you try <ng-container> with [ngTemplateOutletContext] like this?

<ng-container
    [ngTemplateOutlet]="inputTpl"
    [ngTemplateOutletContext]="{ $implicit: child, index: i }"
>
</ng-container>