How to reference an element based on id which is inside an ng-template in Angular 6?

Question

I have a button which is inside an ng-template tag. How do I reference the button element based on id in ts file?

I'm trying to reference it this way, but I get an undefined error.

Code:

HTML

<ng-template #popup >


 <button type="button" #btn id="btn" class="btn btn-sm btn-outline-primary btn-raised" name="button" > Button </button>


</ng-template>

TS file

@ViewChild('btn') btn: ElementRef;

ngAfterViewInit() {
   console.log(this.btn);
}

Answer 1

让我假设您正在使用if else指令进入ng-template，建议您使用viewchecked而不是init