angular2 ng-container how to use dynamic ngTemplateOutletContext

can t bind to ngtemplateoutlet since it isn t a known property of 'ng-container
ng-template ngfor
ngtemplateoutlet dynamic name
ng-container vs ng-content
angular pass template to component
ng-template click event
angular 4 - dynamic template
ng-template pass variable

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?

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

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

Angular ng-template, ng-container and ngTemplateOutlet: Guided , The ng-container directive, when to use it? Dynamic Template with the ngTemplateOutlet custom directive; Template outlet @Input Properties You can attach a context object to the EmbeddedViewRef by setting [ngTemplateOutletContext] . [ngTemplateOutletContext] should be an object, the object's keys will be available for binding by the local template let declarations. <ng-container * ngTemplateOutlet ="templateRefExp; context: contextExp"></ng-container>. content_copy.

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

NgTemplateOutlet, Building Dynamic Forms. Observables & Using the key $implicit in the context object will set its value as default. @Input() You can attach a context object to the EmbeddedViewRef by setting [ngTemplateOutletContext] . <ng-container * ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container>. Using The ng-container directive. In order to avoid having to create that extra div, we can instead use ng-container directive: As we can see, the ng-container directive provides us with an element that we can attach a structural directive to a section of the page, without having to create an extra element just for that.

Maybe you should update your dependencies to 2.4?

  "dependencies": {
    "@angular/common": "~2.4.3",
    "@angular/compiler": "~2.4.3",
    "@angular/core": "~2.4.3",
    "@angular/forms": "~2.4.3",
    "@angular/http": "~2.4.3",
    "@angular/platform-browser": "~2.4.3",
    "@angular/platform-browser-dynamic": "~2.4.3",
    "@angular/platform-server": "~2.4.3",
    "@angular/router": "~3.4.3",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "jasmine-core": "^2.5.2",
    "reflect-metadata": "^0.1.9",
    "rxjs": "~5.0.2",
    "zone.js": "~0.7.4"
  },

Angular: Build more dynamic components with ngTemplateOutlet , ngTemplateOutletContext: A context object to attach to the EmbeddedViewRef. Let's generate the list component using the Angular schematics ( ng g c item of data"> <ng-container [ngTemplateOutlet]="itemTemplate" Also, if you want to project multiple elements under the same selector(i.e transcluding a slotted ng-container), you can use ngProjectAs on the ng-container and pass in that selector. A small example here. Great article! Thanks for sharing!

call to the main template

<ng-template *ngTemplateOutlet="callMain; context: { $implicit: item }"></ng-template> // can use multiple places

main template

<ng-template #callMain let-item>
  //use dynamic item object
</ng-template>

How To Build Dynamic Components in Angular 6 | by Rajat S, This is done using the ngtemplateOutletContext property on the ng-container component. <ng-container *ngIf="template" [ngTemplateOutlet]=" Using NgTemplateOutlet instead of creating specific components allows for components to be easily modified for various use cases without having to modify the component itself! The CardOrListViewComponent displays items in a card or a list format depending on its mode :

Creating Reusable Components with NgTemplateOutlet in Angular , Learn how to use NgTemplateOutlet and structural directives to make <ng- container *ngFor="let item of items"> <ng-container The last thing we need to do is allow the templates to be dynamic by giving them a context:. It is also possible to add context using the ngTemplateOutletContext directive. Its use is rather simple : just declare a template <ng-template> with the code that we want to see re-use, then it is possible to embed it in an another tag of your choice. Here is an example of use:

Dynamic Angular Components via Transclusion, The example this article will use is injecting dynamic components into a the grid and you provide a <ng-template> for your column that you want, <ng- container *ngIf="column. ngTemplateOutletContext allows us to pass data from the grid back Angular � Typescript � JavaScript � Angular2 � Angularjs The templates will be TemplateRefs using <ng-template> and the stamps will be EmbeddedViewRefs created from the TemplateRefs. EmbeddedViewRefs represent views in Angular with their own context and are the smallest essential building block. Angular provides an easy way to use this concept of stamping out views from templates with NgTemplateOutlet.

Everything you need to know about ng-template, ng-content, ng , At that time I got confused between <ng-container> and <ng-content> . use case where it is used to inject a template dynamically into a page. As you can see, the template body, provided by the AppComponent, was used to render the inner content of each "dynamic-repeater-item" within the DynamicRepeaterComponent's ngFor loop. Hella sweet! This was just an experiment; but, I think this taps into a real need in the Angular 2 ecosystem.

Comments
  • use ng-template wourld be adapted.
  • Angular version 5 changed the directive name from ngOutletContext to ngTemplateOutletContext - FYI
  • This is better than having to put in $implicit. It seems odd that something called $implicit needs to be explicitly included to work!
  • do you have an example on stackblitz?
  • I'm already using the latest versions: "@angular/common": "^2.4.5", "@angular/compiler": "^2.4.5", "@angular/core": "^2.4.5", "@angular/forms": "^2.4.5", "@angular/http": "^2.4.5", "@angular/platform-browser": "^2.4.5", "@angular/platform-browser-dynamic": "^2.4.5", "@angular/router": "^3.4.5", "core-js": "^2.4.1",