CODEWITHSUNDEEP
angulartypescript
javiens
javiens

Reputation: 141

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

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

This my demo code.

HTML:

<ng-template #enabled>
   <div class="form-group">
      <div class="ml-4">
         <input type="checkbox" id="verifyDetail" #validate class="form-check-input" [(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.

Upvotes: 1

Views: 2288

Answers (2)

Chaka15
Chaka15

Reputation: 1371

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.

Upvotes: 3

Mahdi Zarei
Mahdi Zarei

Reputation: 7456

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

Upvotes: 0

Related Questions