Pass an array object to ng-template from ng-for

Question

Angular version:

Angular: 5.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.41
@angular-devkit/core: 0.0.28
@angular-devkit/schematics: 0.0.51
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.16
typescript: 2.5.3
webpack: 3.10.0

When I pass an object from ng-for to ng-template, i get error 'Can't bind to 'ngTemplateOutletContext' since it isn't a known property of 'ng-container'. 1. If 'ngTemplateOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.'

I do have CommonModule in my app.module

import { CommonModule } from '@angular/common';
@NgModule({
  declarations: [
    ....
  ],
  imports: [
    CommonModule,
    BrowserModule,
    ...
    ]


    <tr grid-item *ngFor="let row of environs; let i = index">
        <td width="30%">{{i+1}} ). {{row.envName}}</td>
        <ng-container *ngIf="row.services?.length > 0">
            <ng-container *ngTemplateOutlet="deviceBlock" 
                [ngTemplateOutletContext]="{svc:row.services[0]}"></ng-container>
        </ng-container>

        <div *ngFor="let dev of row.services; let j = index">
            <ng-container *ngTemplateOutlet="deviceBlock" 
                [ngTemplateOutletContext]="{svc:dev}"></ng-container>
        </ng-container>
        </div>
    </tr>
<ng-template #deviceBlock let-svc='svc'>
    <td width="30%">{{svc.deviceName}}</td>
    <td width="20%">{{svc.serviceName}}</td>
</ng-template>

[This](https://angular.io/api/common/NgTemplateOutlet) may be helpful to you. — R. Richards, Feb 25 '18 at 14:24
I was trying to make solution work based on answer [here](https://stackoverflow.com/questions/48204477/passing-ngfor-variable-to-an-ngif-template). This works but when i pass an object it does not. — Sannu, Feb 26 '18 at 03:04

Sannu · Answer 1 · 2018-02-26T14:02:42.083

OK, I was able to fix this

        <ng-container [ngTemplateOutlet]="deviceBlock" 
            [ngTemplateOutletContext]="{svc:row.services}"></ng-container>
        <div *ngFor="let dev of row.services; let j = index">
                <ng-container [ngTemplateOutlet]="deviceBlocks" 
                    [ngTemplateOutletContext]="{dev:dev}"></ng-container>
        </div>

<ng-template #deviceBlock let-svc='svc'>
    <ng-container *ngIf="svc?.length > 0">
            <ng-container [ngTemplateOutlet]="tableRow" 
                [ngTemplateOutletContext]="{svc:svc[0]}"></ng-container>
    </ng-container>
</ng-template>
<ng-template #deviceBlocks let-dev='dev'>
    <tr>
        <td>&nbsp;</td>
        <ng-container [ngTemplateOutlet]="tableRow" 
        [ngTemplateOutletContext]="{svc:dev}"></ng-container>
    </tr>
</ng-template>
<ng-template #tableRow let-svc='svc'>
    <td width="30%">{{svc.deviceName}}</td>
    <td width="20%">Ip Address</td>
    <td width="20%">{{svc.serviceName}}</td>
</ng-template>

EDIT: (Added following) Thanks to the answer provided here

Pass an array object to ng-template from ng-for

1 Answers1