title: How can I take reference to an element inside ng-template?
body: <p>I am using viewChild to take reference of that element but it is throwing me error native Element of undefined. I tried set time out also but still getting same error.</p>
  
  <pre><code>    &lt;ng-template #publishAnywherePDF let-c="close" let-d="dismiss"&gt;
        &lt;div class="modal-header" *ngIf="!publishError &amp;&amp; publishAnywhereStep != 2"&gt;
          &lt;h4 class="modal-title" [hidden]="publishAnywhereStep !== 1" tabindex="0" #title&gt;Download Publish Anywhere PDF&lt;/h4&gt;
          &lt;h4 class="modal-title" *ngIf="publishAnywhereStep == 3" tabindex="0"&gt;Publish Anywhere PDF&lt;/h4&gt;
          &lt;button type="button" class="close" aria-label="Close" (click)="d()" role="button"&gt;
            &lt;i class="il-clear"&gt;&lt;/i&gt;
          &lt;/button&gt;
   &lt;button type="button" role="button" class="btn btn-small btn-tertiary pull-right" (focus)="focus()"&gt;Cancel&lt;/button&gt;
      &lt;ng-template&gt;
  </code></pre>
  
  <p>I am trying to access #title in h4</p>
  
  <pre><code>@Component({
    selector: 'app-publish-anywhere-pdf',
    templateUrl: './publish-anywhere-pdf.component.html',
    styleUrls: ['./publish-anywhere-pdf.component.scss']
  })
  export class PublishAnywherePdfComponent implements OnInit, AfterViewInit {
     @ViewChild('title') titleRef: ElementRef;
      focus() {
      console.log(this.titleRef.nativeElement);
      }
  }
  </code></pre>