Angular 11: How to access a native element inside ng-template-CodePudding

I have problem to access element inside <ng-template>. It return undefined.

This my demo code.

HTML:

<ng-template #enabled>
   <div >
      <div >
         <input type="checkbox" id="verifyDetail" #validate  [(ngModel)]="checkStatus"
         [ngModelOptions]="{standalone: true}"
         (click)="detailformSubmission(detailForm.valid, $event)"  (blur)="detailformSubmission(detailForm.valid, $event)">
      </div>
   </div>
</ng-template>

ts:

@ViewChild('validate', {static: true}) vrt!: ElementRef<any>;

ngOnInit(){
console.log(this.vrt);
}

console.log returns undefined.

CodePudding user response：

You could remove { static: true} from @ViewChild decorator (default is false). After that you could implement AfterViewInit interface and use ngAfterViewInit lifecylce method in which you should be able to access reference from your template .html file.

CodePudding user response：

Use <ng-container> instead of <ng-template>.