title: Angular ViewChild fileInput annotation is undefined
body: <p>If my fileInput element is in a normal div, then it works fine. But if I place it inside <code>&lt;ng-template&gt;&lt;/ng-template&gt;</code> then I am getting it undefined.</p>
  
  <p>Here is my code :</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ng-template #content let-c="close" let-d="dismiss"&gt;
     &lt;div class="modal-header"&gt;
        &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
        &lt;button type="button" class="close" aria-label="Close" (click)="d('Cross click')"&gt;&lt;/button&gt;
     &lt;/div&gt;
     &lt;div class="modal-body"&gt;
        &lt;form #documentsForm="ngForm" (ngSubmit)="onEditSubscriberDocumentsSubmit(documentsForm.value);documentsForm.reset()"&gt;
           &lt;input #fileInput type="file" #select name="document" [(ngModel)]="document" (click)="onDocUpload()" /&gt;       
           &lt;input type="submit" value="Save" class="btn btn-success" [hidden]="addDocHidden"&gt;
        &lt;/form&gt;
     &lt;/div&gt;
     &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-outline-dark" (click)="c('Close click')"&gt;Close&lt;/button&gt;
     &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p><strong>TS</strong></p>
  
  <p><code>import { Component, OnInit, ViewChild , ElementRef} from '@angular/core';</code></p>
  
  <pre><code>export class EditSubscriberComponent {
      constructor(private http: Http, private route: ActivatedRoute, private router: Router, private modalService: NgbModal) { }
      @ViewChild("fileInput") fileInput: ElementRef;
      ngOnInit() {
         console.log(this.fileInput)
         // This is undefined. If I place the &lt;input #fileInput type="file"&gt; 
         // in the main div,not under ng-template, then I am getting the 
         // desired output
      }
  }
  </code></pre>
  
  <p>Please suggest how can I access ViewChild from ng-template</p>