2

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);
}
Anirudh
  • 2,767
  • 5
  • 69
  • 119
  • @HameedSyed it doesn't work – Anirudh Feb 14 '19 at 12:13
  • You cannot. You can use a directive, but it depends on what you are trying to do in the first place. Can you explain what you eventually want to do with that button? There might be a more logical solution. – Silvermind Feb 14 '19 at 12:19
  • @Silvermind I need to call Google login using their JS library which has `attachSignin(element)` function for binding the click event to the button. – Anirudh Feb 14 '19 at 12:22
  • Possible duplicate of [Get reference to element inside ng-template](https://stackoverflow.com/questions/47428783/get-reference-to-element-inside-ng-template) – Hameed Syed Feb 14 '19 at 12:24
  • can you please let me know what you want to do after grabbing reference – Pranay Rana Feb 14 '19 at 12:26
  • @PranayRana I need to call Google login using their JS library which has attachSignin(element) function for binding the click event to the button – Anirudh Feb 14 '19 at 12:30
  • @HameedSyed I couldnt find a solution over there, could you explain? – Anirudh Feb 14 '19 at 12:34

1 Answers1

0

Let me assume you are using if else directive to get to the ng-template, I suggest you use viewchecked instead of init

Monday A Victor
  • 441
  • 5
  • 16