title: Angular 4 template with context not working
body: <p>I'm working on a dynamic form component I have created and the custom templates I'm using are unable to get the context correctly.</p>
  
  <p>Here is my ng-template:</p>
  
  <pre><code>  &lt;ng-template #defaultTemplate let-field&gt;
      &lt;div class="form-group" [ngClass]="!field.isValid() ? 'has-error' : ''"&gt;
        &lt;label class="control-label" [for]="field.property"&gt;{{ field.label }}&lt;/label&gt;
        &lt;app-dynamic-form-field [formField]="field"&gt;&lt;/app-dynamic-form-field&gt;
      &lt;/div&gt;
    &lt;/ng-template&gt;
  </code></pre>
  
  <p>And here is how I use it:</p>
  
  <pre><code>  &lt;ng-container *ngFor="let field of formModel.formFields"&gt;
      &lt;ng-container [ngTemplateOutlet]="fieldTemplate || defaultTemplate" [ngOutletContext]="getContextForTemplate(field)"&gt;
  
      &lt;/ng-container&gt;
    &lt;/ng-container&gt;
  </code></pre>
  
  <p>Here is the typescript of the component related to create the context:</p>
  
  <pre><code>  getContextForTemplate(field: BaseFormField&lt;any&gt;) {
      return {
        $implict: field
      };
    }
  </code></pre>
  
  <p>The error I'm having is:</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'isValid' of undefined</p>
  </blockquote>
  
  <p>Though the form field object does have the isValid method. If I don't use the code above as template and directly inside the *ngFor of the container everything works as it should.</p>
  
  <p>Edit:
  I have tried this code as well and it does not seem to work:</p>
  
  <pre><code>&lt;form&gt;
    &lt;ng-template #defaultTemplate let-field&gt;
      &lt;div&gt;
        {{ field }}
      &lt;/div&gt;
    &lt;/ng-template&gt;
  
    &lt;ng-container *ngFor="let field of [1,2,3]" [ngTemplateOutlet]="defaultTemplate" [ngOutletContext]="{ $implict: 'hello' }"&gt;
  
    &lt;/ng-container&gt;
  
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/form&gt;
  </code></pre>