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
Encountering an issue when passing an object from ng-for to ng-template; receiving the 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.
The CommonModule has already been imported 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>