ngTemplateOutletContext context source is undefined

Question

That code worked at least with angular 2 if not even with angular < 4.3.6.

At the moment gradingKey object is undefined inside the display or edit template.

It is not undefined in the getTemplate(gradingKey) method.

gradingKey is initialized as class field in the

component

@Input() set gradingKeyModel(gradingKeyModel: GradingKeyModel) {
    this.gradingKey = gradingKeyModel.gradingKey;
}

Html

<ng-template [ngTemplateOutlet]="getTemplate(gradingKey)" 
             [ngTemplateOutletContext ]="{ $implicit: gradingKey }">
</ng-template>

<ng-template #displayTemplate let-gradingKey>
    <div>
        {{gradingKey}}       
    </div>
</ng-template>

<ng-template #editTemplate let-gradingKey>
    <div>
        {{gradingKey}}       
    </div>
</ng-template>

Why is gradingKey undefined inside the templates suddenly?

Did the way how to access ngOutletContext changed when using ngTemplateOutletContext?

Answer 1

ngTemplateOutlet needs to be wrapped in ng-container. You passed to the ngTemplateOutletContext $implicit variable (which is good), but try to change it to explicit variable like below:

<ng-container [ngTemplateOutlet]="getTemplate(gradingKey)" 
              [ngTemplateOutletContext ]="{ gradingKey: gradingKey }">
</ng-container>

<ng-template #displayTemplate let-gradingKey="gradingKey">
    <div>
        {{gradingKey}}        
    </div>
</ng-template>